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