HTML5新增了画图标签！这个新的标签跟别的家伙不一样，它能搞到一个canvasrenderingcontext2D对象，让咱们用JavaScript来把这货当画布用，画出各种炫酷的图案！这个新标签跟咱们平常看到的id啊、class啊、style那些参数不太一样，多了两个height和width属性，就是用来告诉浏览器要画多大的图。画图的时候，先得拿到canvas对象，再拿到canvasrenderingcontext2D对象，最后就可以用这个对象开始画画！
canvas标签的基本属性
用标签来画图之前，得先知道点基础知识。标签有我们熟知的id、class和style属性，但也少不了height和width这俩兄弟。他们就是管着画布大小的重要角色。设定好他们两个能让你随心所欲地调整画布大小，绘图更顺手。
绘制五角星
分析下五角星，就能找到每个顶点位置的规律！记住，Canvas里的y坐标得往下看。算出五角星所有顶点的坐标，然后按次序连起来，Canvas上不就出现了五角星！这可需要点儿数学知识和CanvasAPI的了解呢～
CanvasAPI
CanvasAPI就像是HTML5里的画笔工具，能让我们在网页上轻松画出各种图案。有了它，就算是复杂的图形也不在话下！关键就在于这个canvas元素背后的context对象，所有绘制都得在这儿操作。别看它只是简简单单的线条、填充，其实还有更多高级功能等你来玩，比如渐变、阴影、路径等等，绝对能让你的作品色彩斑斓！
Canvas渲染原理
Canvas其实就是个位图画板~它在网页显示的时候就按照你设备像素来绘制了，最后保存在位图里头。所以要想对Canvas怎么办，其实就是对这张图片里的每个像素点点进行改动。因为它是用位图来画出东西的，所以如果遇到好多复杂点的图案或者卡通效果的话，很容易卡机！为了让我们的网站更顺畅、更好用，开发的时候得注意优化一下画图的步骤，尽量少做无谓的重复渲染。
Canvas与SVG比较
除了Canvas，你知道网页开发里还能画图？就是SVG，也就是升级版的矢量图。比起位图，它不怕放缩失真，而且还可以处理事件和动效！Canvas适合作大量动态像素级别的动态图，但要是展示静态或者互动性不高的图，SVG就更合适。
Canvas应用场景
Canvas被用在好多地方，像Web游戏开发、数据可视化还有照片编辑器啥的都离不开它。用Canvas做出来的东西就是好看又好玩儿，能给大家带来不一样的视觉感受。在手机App开发上也是常用Canvas，让你的界面炫酷到爆！
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.beginPath();
//设置是个顶点的坐标，根据顶点制定路径
for (var i = 0; i < 5; i++) {
context.lineTo(Math.cos((18+i*72)/180*Math.PI)*200+200,
-Math.sin((18+i*72)/180*Math.PI)*200+200);
context.lineTo(Math.cos((54+i*72)/180*Math.PI)*80+200,
-Math.sin((54+i*72)/180*Math.PI)*80+200);
}
context.closePath();
//设置边框样式以及填充颜色
context.lineWidth="3";
context.fillStyle = "#F6F152";
context.strokeStyle = "#F5270B";
context.fill();
context.stroke();
Canvas性能优化
为了让你的Canvas应用更流畅，用户玩得开心点儿，弄几个小窍门来优化一下性能是很有必要的！比如别老去重新画一遍东西，简单点儿；别老是折腾那些弯弯曲曲的路径，省事儿点；把重叠的路径搞到一起，也能提高点速度。当然了，如果你的应用是个手机上跑的，那节省一下资源也是很重要的，比如用点节流和防抖之类的招数。
未来发展趋势
网速越来越快，Canvas这家伙也在进步！现在硬件和浏览器更新换代了，你说Canvas以后会不会变得更重要？我看是肯定的！
这儿就是咱们的HTML5新标签和使用它们的详细说明！画图的时候记得理解这些基础知识和小窍门儿，这样才能在实战中得心应手，画出各种美美的图案来~
评论0