为什么省略beginPath()重画一切? [英] Why does omitting beginPath() redraw everything?
问题描述
没有 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();
};
解决方案默认内部
/ code> object在内部累积所有路径方法调用,例如
等,它们基于当前设置直接光栅化)。这些只是向量表示。lineTo
,rect
,arc
等等(有一些例外,例如fillRect
,strokeRect
code> fillText
每次调用
路径对象。stroke()
或fill()
使用当前笔触和/或填充颜色设置
beginPath()
是丢弃现有(子)路径并开始新鲜的唯一方法。因为它只清除内部路径,而不是在画布上的光栅化结果,这通常永远不会有问题,除非你想重用这些路径。
还有另一种方法在更多浏览器中暴露
Path
对象时,不使用beginPath()
Path
对象直接,但似乎没有集成到画布使用)。
code> 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 >
注意:许多人都有这样的印象:
closePath()
将结束路径,但它所做的就是关闭连接第一个点和最后一个点的循环。您仍然可以向其中添加新路径。Without
context.beginPath();
the 10px red stroke at the top is redrawn as a 30px green stroke, even though the 30px and green context properties aren't called until after the stroke has already been drawn. Why is that?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(); };
解决方案The default internal
Path
object accumulates internally all path method calls such aslineTo
,rect
,arc
and so forth (with a few exceptions such asfillRect
,strokeRect
,fillText
etc. which are rasterized directly based on current settings). These are at this point only vector representations.Every time you call
stroke()
orfill()
the Path object is rasterized with the current stroke and/or fill color settings.After you have rasterized the path it does not clear itself and you can continue to accumulate paths to it.
beginPath()
is the only way to discard existing (sub) paths and start fresh. As it only clears the internal paths and not the rasterized result on the canvas this is usually never a problem unless you want to reuse those paths.There is another way you can do this without using
beginPath()
when thePath
object is exposed in more browsers (currently only Chrome let you use aPath
object directly but does not seem to integrate it for canvas use quite yet).You could make different
Path
objects and rasterize those separately: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);
Here you won't need
beginPath()
and you can reuse those objects - combined with translate and so forth you basically have a more object oriented canvas.As a side note: Many have the impression that
closePath()
will "end" the path but all it does is to close the "loop" connecting the first point with the last point. You can still add new paths to it.这篇关于为什么省略beginPath()重画一切?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!