正文
理解canvas路径
小程序:扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序
【扫一扫了解最新限行尾号】
复制小程序
canvas路径和ps里面的路径差不多,在进行图形绘制时,先绘制出来图形的路径,然后再描边或者填充。
canvas路径还有子路径的概念,在某一时刻,canvas之中只能有一条路径存在,Canvas规范将其称为当前路径。然而这条路径可以包含许多子路径。而子路径,又是由两个或者更多的点组成的。
看下面代码
context.beginPath(); context.rect(10, 10, 100, 100);
context.stroke(); context.beginPath(); context.rect(50, 50, 100, 100);
context.stroke();
上述代码调用beginPath()
来开始一段新的路径,该方法会将当前路径所有子路径清除掉。调用rect()
方法会向当前路径增加包含四个点的子路径。stroke()
方法将当前路径的轮廓线描绘出来。
如果下一次不调用beginPath()
,而是直接调用rect()
方法,则会向当前路径添加多条子路径。然后调用stroke()
方法,会向多个矩形描边,会重绘第一个矩形。