HTML5Canvas动画与图形教程
画布绘图的必备技能之一，就是用 HTML5 的Canvas元素来搞定各种动画和图形展示。
HTML5 的Canvas，就像网页里的一块空白画布，配上 JavaScript 之后，你几乎能画出一切。不管是简单图形，还是复杂动画，都能搞定。
使用方式也挺直接的，定义个标签，给个id，再用getContext('2d')获取绘图环境。想画个矩形？用fillRect；想做个圆？arc走起。
像弹跳球动画这种，几行代码就能实现，响应也快，交互感强。加点requestAnimationFrame，动画就更流畅了。还能结合图像、路径绘制啥的，玩法多着呢。
不过，Canvas 不支持的老浏览器也还存在，记得加个替代内容，提升下兼容体验哦。
如果你想做一个动态数据图表、在线画板、甚至小游戏，Canvas都挺合适的。建议搭配一点requestAnimationFrame和事件监听，能让你的页面更“活”一点。
想深入的话，推荐几个不错的资源：HTML5 Canvas 绘图工具、Canvas 画板涂鸦动画，还有jCanvas.js这种插件，用起来也蛮顺手的。
文件大小：86.34KB
评论区