Canvas矢量图形渲染器
Canvas 的矢量图形渲染能力，挺适合做图表、动画这些对清晰度要求高的东西。它是 HTML5 里原生支持的，API 还蛮丰富，基本上你能想到的 2D 图形，它都能画。像beginPath()、arc()这些方法，用起来还挺顺手。
Canvas 的优势一个字：清。矢量图天生不怕缩放，放大十倍都不会糊，适合做地图、图表、或者需要拉伸的动画场景。像fillText()这种文本渲染，也蛮灵活，配合font属性还能随便换字体。
要开始用也不复杂，获取上下文：canvas.getContext('2d')，就是画了。你可以先来个fillRect()试试感受，响应也快，代码也简单。要做交互，直接绑事件就行，鼠标点哪画哪。
另外 Canvas 还能搞些高级效果，比如渐变、阴影、甚至图片，像drawImage()配合裁剪、旋转什么的，能玩出不少花样。做动态动画？用requestAnimationFrame()就行，帧率稳还不卡。
不过也有坑，比如频繁重绘性能会掉，建议别全屏清，clearRect()控制一下范围。真要做复杂图形，考虑上 WebGL，或者干脆用 SVG 来搞定。
如果你常做动态图表、H5 动画、或者想给页面加点酷炫的动效，Canvas 还是值得花时间学一学的。想进一步研究，可以看看这些资源：
下载地址
用户评论
