没有context.beginPath();顶部的10px红色笔划重新绘制为30px绿色笔划,即使在已经绘制笔划之后才调用30px和绿色上下文属性.这是为什么？
window.onload = function() {
var canvas = document.getElementById("drawingCanvas");
var context = canvas.getContext("2d");
context.moveto(10,50);
context.lineto(400,50);
context.linewidth = 10;
context.strokeStyle = "red";
context.stroke();
//context.beginPath();
context.moveto(10,120);
context.lineto(400,120);
context.linewidth = 30;
context.strokeStyle = "green";
context.stroke();
};
解决方法
默认的内部Path对象在内部累积所有路径方法调用,例如lineto,rect,arc等等(有一些例外,例如fillRect,strokeRect,fillText等,它们直接根据当前设置进行栅格化).这些只是矢量表示.
每次调用stroke()或fill()时,Path对象都会使用当前笔触和/或填充颜色设置进行栅格化.
栅格化路径后,它不会自行清除,您可以继续累积路径.
beginPath()是丢弃现有(子)路径并重新开始的唯一方法.由于它只清除内部路径而不是画布上的栅格化结果,因此除非您想重用这些路径,否则这通常不会成为问题.
当Path对象在更多浏览器中公开时,还有另一种方法可以在不使用beginPath()的情况下执行此操作(目前只有Chrome允许您直接使用Path对象,但似乎还没有将它集成到画布使用中).
您可以创建不同的Path对象并单独栅格化它们：
var path1 = new Path(); var path2 = new Path(); path1.moveto(10,50); path1.lineto(400,50); context.linewidth = 10; context.strokeStyle = "red"; context.stroke(path1); path2.moveto(10,120); path2.lineto(400,120); context.linewidth = 30; context.strokeStyle = "green"; context.stroke(path2);
在这里你不需要beginPath(),你可以重用那些对象 – 结合translate等等你基本上有一个更面向对象的画布.
作为旁注：许多人认为closePath()将“结束”路径,但它所做的就是关闭连接第一个点和最后一个点的“循环”.您仍然可以添加新路径.