HTML5高级程序设计2Canvas绘图详解
HTML5 的 Canvas API 是前端绘图里的老牌狠角色，直接操作像素，效率高、玩法多，适合需要频繁重绘的场景，比如动画、游戏、数据可视化那类的。虽然不像 SVG 那样能直接操作 DOM，但 Canvas 胜在轻巧，灵活，响应也快，写起来也挺爽。
Canvas 的历史还挺有意思的，最早是苹果为了搞 Dashboard 部件提出来的，后来被 HTML5 收编正式成了一员猛将。相比当年的 Flash 和 VML，Canvas 就像一把小巧锋利的刀子，轻便但好使，是画图这块儿，一用就知道香。
Canvas vs SVG这种对比老生常谈了。你要是做图标、流程图那类需要交互和缩放的，用 SVG 没毛病。但你要是真想搞点酷炫特效、模拟粒子效果或者动态绘图，Canvas 上场更合适。就像修车，一个拿电钻，一个拿锤子，看你要干嘛。
用法也挺直白，页面上塞一个元素，配上宽高，再用 JavaScript 拿到它的getContext('2d')上下文，就能愉快地画起来了。比如下面这段小代码，就能画条线：
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.moveTo(0, 0);
ctx.lineTo(150, 100);
ctx.stroke();
坐标系这块儿也别搞混了，Canvas 是左上角为原点，x 往右，y 往下。这个跟多图像库的规则一样，如果你做过桌面开发会觉得挺熟。
但也不是万能的，你要是画的是静态图片，那还不如直接用</>省事。需要和 >
<>如果你打算做图形、动画渲染或者数据可视化，>
<><>
<>< href>HTML5 Canvas 详解
嗯，如果你是那种想自己动手搞点酷炫交互、喜欢自己画图不靠第三方库的，Canvas API 绝对不亏。别怕它低阶，用熟了以后，你会发现，多库底层其实也就是在用它。
文件大小：1.29MB
评论区