我必须有content.beginPath（）和content.closePath（）吗？ [英] Do I have to have the content.beginPath() and content.closePath()?

问题描述

是否必须包含beginPath和closePath以便绘制该线或用于所有图形。我有新的HTML 5 Canvas书，但是我不完全确定。我评论了两条线，并且线条仍然显示。这两行的意义是什么。

问题：beginPath（）和closePath（）做了什么？

代码：

  context.lineJoin ='round'; 
 context.lineCap ='butt'; 
 context.beginPath（）; 
 context.moveTo（10，100）; 
 context.lineTo（35，100）; 
 context.lineTo（35,125）; 
 context.stroke（）; 
 context.closePath（）; 
  

解决方案

不， beginPath 和 closePath 不是必需的。

画布上下文有当前路径。您可以使用诸如 moveTo 和 lineTo 等方法向该路径添加指令。完成路径构建后，可以使用 stroke 和 fill 等方法在画布上绘制使用当前路径。

closePath 只是您可以添加的另一条指令。您在使用 fill 时可能没有注意到它的作用，但是当使用 stroke 时，它会（实质上）到开始的位置，'关闭'路径。比较和对比：

  ctx.moveTo（10，10）; ctx.moveTo（10，10）; 
 ctx.lineTo（90，10）; ctx.lineTo（90，10）; 
 ctx.lineTo（90，90）; ctx.lineTo（90，90）; 
 ctx.closePath（）; 
 ctx.stroke（）; ctx.stroke（）; 
  

beginPath ，另一方面，丢弃以前的路径，并让你开始一个新的。没有它，你会越来越多地追溯到前面的路径，这可能是不可取的。比较和对比：

  ctx.moveTo（10，10）; ctx.moveTo（10，10）; 
 ctx.lineTo（90，10）; ctx.lineTo（90，10）; 
 ctx.lineWidth = 4; ctx.lineWidth = 4; 
 ctx.strokeStyle =red; ctx.strokeStyle =red; 
 ctx.stroke（）; ctx.stroke（）; 
 ctx.beginPath（）; 
 ctx.moveTo（10，20）; ctx.moveTo（10，20）; 
 ctx.lineTo（90，20）; ctx.lineTo（90，20）; 
 ctx.lineWidth = 2; ctx.lineWidth = 2; 
 ctx.strokeStyle =blue; ctx.strokeStyle =blue; 
 ctx.stroke（）; ctx.stroke（）; 
  

Does the beginPath and the closePath have to be included for this line to draw or for all of the graphics. I have the new HTML 5 Canvas book but this I was not completely certain of. I commented out the two lines and the line still displayed. What is the significance of these two lines.

Question: What does the beginPath() and closePath() do?

Code:

context.lineJoin='round';
context.lineCap='butt';
context.beginPath();
context.moveTo(10, 100);
context.lineTo(35, 100);
context.lineTo(35,125);
context.stroke();
context.closePath();

解决方案

No, beginPath and closePath are not necessary.

A canvas context has a current path. You can add instructions to that path with methods such as moveTo and lineTo, among others. When you're done constructing the path, you can use methods such as stroke and fill, which draw on the canvas using the current path.

closePath is just another instruction you can add. You may not notice its effect when using fill, but when using stroke, it will (essentially) do a line back to the starting position, ‘closing’ the path. Compare and contrast:

ctx.moveTo(10, 10);    ctx.moveTo(10, 10);
ctx.lineTo(90, 10);    ctx.lineTo(90, 10);
ctx.lineTo(90, 90);    ctx.lineTo(90, 90);
                       ctx.closePath();   
ctx.stroke();          ctx.stroke();

beginPath, on the other hand, discards the previous path and lets you start a new one. Without it, you'd be appending more and more to the previous path, which may be undesirable. Compare and contrast:

ctx.moveTo(10, 10);           ctx.moveTo(10, 10);
ctx.lineTo(90, 10);           ctx.lineTo(90, 10);
ctx.lineWidth = 4;            ctx.lineWidth = 4;
ctx.strokeStyle = "red";      ctx.strokeStyle = "red";
ctx.stroke();                 ctx.stroke();
                              ctx.beginPath();
ctx.moveTo(10, 20);           ctx.moveTo(10, 20);
ctx.lineTo(90, 20);           ctx.lineTo(90, 20);
ctx.lineWidth = 2;            ctx.lineWidth = 2;
ctx.strokeStyle = "blue";     ctx.strokeStyle = "blue";
ctx.stroke();                 ctx.stroke();

这篇关于我必须有content.beginPath（）和content.closePath（）吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！