为什么省略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 as lineTo, rect, arc and so forth (with a few exceptions such as fillRect, strokeRect, fillText etc. which are rasterized directly based on current settings). These are at this point only vector representations.

Every time you call stroke() or fill() 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 the Path object is exposed in more browsers (currently only Chrome let you use a Path 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屋！