绘制路径

TIP

图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径,甚至一个子路径,都是闭合的。

使用路径绘制图形一般需要以下步骤:

  1. 创建路径起始点
  2. 调用绘制方法去绘制出路径
  3. 把路径封闭
  4. 一旦路径生成,通过描边或填充路径区域来渲染图形。

canvas 绘制路径相关的 API

  1. beginPath() 新建一条路径,路径一旦创建成功,图形绘制命令被指向到路径上生成路径
  2. moveTo(x, y) 把画笔移动到指定的坐标(x, y)。相当于设置路径的起始点坐标。(可以理解为将画笔悬空移动)
  3. lineTo(x, y) 将画笔以画线的形式移动到另一点坐标(x, y)。(可以理解为让画笔在画纸上移动)
  4. closePath() 闭合路径之后,图形绘制命令又重新指向到上下文中
  5. stroke() 通过线条来绘制图形轮廓
  6. fill() 通过填充路径的内容区域生成实心的图形

绘制线段

只需要使用其 moveTolineTo 即可创建线段,使用 stroke 绘制线条。

ctx.moveTo(50, 50);
ctx.lineTo(50, 100);
ctx.stroke();

效果如下:

绘制图形

结合着 beginPathclosePath 可以创建一个封闭路径,使用 stroke 进行描边,使用 fill 进行填充。

如: 通过路径绘制一个矩形

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(50, 100);
ctx.lineTo(100, 100);
ctx.lineTo(100, 50);
ctx.closePath();
ctx.fill();

效果如下:

WARNING

在绘制图形路径时,一定要先调用beginPath()。beginPath()方法将会清空内存中之前的绘制路径信息。如果不这样做,对于绘制单个图形可能没什么影响,但是在绘制多个图形时,将会导致路径绘制或者颜色填充等操作出现任何意料之外的结果。

绘制虚线

ctx.setLineDash(segments)

setLineDash 接收一个数组,按照数组元素组成 (线长,间距) 的形式,循环调用数组中的所有元素作为线长与间距

ctx.save();
ctx.setLineDash([40,30,20]);
ctx.lineWidth = 4;
ctx.strokeStyle = '#0f0';
ctx.beginPath();
ctx.moveTo(10, 100);
ctx.lineTo(400, 100);
ctx.stroke();
ctx.restore();

效果如下:

原理如下:

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress