Canvas 线性图形（一）：路径

程序员爱敏技术 2022年11月16日

0 收藏 387 点赞 2,900 浏览 851 个字

路径的概念

路径是从起始点到结束点之间的连线。个人认为，二维画布中分为线性图形和非线性图形，线性图形包括矩形、直线、曲线、圆形等各种几何图形；非线性图形包括图象、文本、像素。线性图形中又分为路径和非路径，路径的特点就是以 beginPath() 来开启，非路径图形就是使用 rect() 函数绘制的矩形，这样的矩形不需要用 beginPath() 来开启。

直线

绘制一条直线必须要确定其起始点以及结束点，起始点用 moveTo 函数；结束点用 lineTo 函数。lineTo 代表路径从起始点到结束点都是一条直线。

ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(200, 200);
ctx.stroke();
ctx.closePath();

最终的效果：

贝塞尔曲线

前面提到过，路径是连接着起始点和结束点的线，贝塞尔曲线函数 quadraticCurveTo 踢动了贝塞尔的控制点以及结束点，在 beginPath() 之后一定要确定路径的起始点，即 moveTo()。《Canvas 基础（三）：画曲线》中提到了绘制贝塞尔曲线的细节。

ctx.beginPath();
ctx.moveTo(10, 200);
ctx.quadraticCurveTo(60, 80, 200, 200);
ctx.stroke();
ctx.closePath();

路径装饰

路径颜色

路径的默认颜色是 #ff0000，由属性 strokeStyle 决定，接受十六进制、RGB、RGBA、颜色英文单词。

路径填充

路径矩形、圆形可以填充某种颜色，即“路径填充”。用连续的 lineTo() 绘制一个路径矩形：

ctx.beginPath();
ctx.moveTo(40, 40);
ctx.lineTo(220, 40);
ctx.lineTo(220, 220);
ctx.lineTo(40, 220);
ctx.stroke();
ctx.closePath();
// 填充路径
ctx.fillStyle = '#689bc5';
ctx.fill();

填充的效果：