CaveDraw源码07:canvas api中beginPath()的作用

在某一时刻, canvas之中只能有一条路径存在, Canvas规范将其称为“当前路径”(currentpath)。然而,这条路径却可以包含许多子路径(subpath)。

beginPath()会将当前路径中的子路径全部都清除掉。

下面的代码绘制了两个矩形,有不同的颜色,每次调用rect()绘制路径时,都先调用了beginPath()将当前路径中的子路径全部都清除掉,结果如图。

context.beginPath ();
context.rect (10, 10, 100, 100);
context.strokeStyle = "red";
context.stroke();

context.beginPath ();
context.rect (50, 50, 100, 100);
context.strokeStyle = "blue";
context.stroke();

注释掉第二个beginPath(),结果绘制的两个矩形都变成了蓝色。原因是由于没有调用beginPath(),接下来的rect()方法向当前路径中增加了一条子路径,最后的stroke()方法会将这两条子路径描边,第一个stroke()方法的描边被覆盖掉了。

context.beginPath ();
context.rect (10, 10, 100, 100);
context.strokeStyle = "red";
context.stroke();

// context.beginPath ();
context.rect (50, 50, 100, 100);
context.strokeStyle = "blue";
context.stroke();
Copyright © 2022,枫糖, 版权所有,禁止转载、演绎、商用。
离开前,建议您浏览一下 归档 页面,或许有更多相关的、有趣的内容!
如需博主帮助,请转到 小卖铺 页面,购买手工活服务!

添加评论

code