为什么javascript canvas2d裁剪需要路径？

我在这个bug上拉了一下头发一段时间。我想在画布的三个部分渲染图像，而不允许它们重叠。基本上，我想用canvas.getContext('2d').clip()来保持图像分离。但是，剪辑仅适用于在绘制图像后调用canvas.getContext('2d').beginPath()。为什么javascript canvas2d裁剪需要路径？

所以这不工作（没有剪辑应用）：

this.draw=function(image, cx, cy, width, height, clip){ 
     var ctx = this.canvas.getContext('2d'); 
     ctx.save(); 
     ctx.rect(clip.x, clip.y, clip.width, clip.height); 
     ctx.clip(); 
     ctx.fillStyle = "black"; 
     ctx.fillRect(clip.x, clip.y, clip.width, clip.height); 
     ctx.drawImage(image,cx-width/2,cy-height/2,width,height); 
     ctx.restore(); 
     return this; 
    };

但这：

this.draw=function(image, cx, cy, width, height, clip){ 
     var ctx = this.canvas.getContext('2d'); 
     ctx.save(); 
     ctx.rect(clip.x, clip.y, clip.width, clip.height); 
     ctx.clip(); 
     ctx.fillStyle = "black"; 
     ctx.fillRect(clip.x, clip.y, clip.width, clip.height); 
     ctx.drawImage(image,cx-width/2, cy-height/2,width,height); 
     ctx.beginPath();// <------WITCHCRAFT 
     ctx.restore(); 
     return this; 
    };

这是我发现了一个总的事故beginPath()修复的问题，我不知道为什么。任何人都可以向我解释这个吗？

来源

2016-08-17 Kenkron

不是巫术，这是你告诉上下文的方式，你开始一条新的道路，并完成旧的道路。顺便说一句，beginPath应该在你创建一个路径之前去执行（就在你的代码中'ctx.save（）'之后）。只是运气它的工作原理，因为如果你使用ctx.arc而不是fillRect，它会将弧添加到剪辑中。 – Blindman67

我仍然对[rect（）]（https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rect）的文档感到困惑，它说子路径是标记为关闭。另外，如果我用'ctx.arc（256,256,512,0,3.1416 * 2，true）;'替换fillRect行，裁剪仍然有效（512x512画布）。公平地说，如果我将它移动到save（）后面，它仍然可以工作。 – Kenkron

在很大程度上，我很困惑beginPath（）似乎穿越时空。它不能用于剪切路径，因为已经完成了。它不能用于图像，因为这也是做的。就好像剪辑指令只在路径启动后才应用，但一旦它启动，它可以追溯剪辑自剪辑调用后已经绘制的图像。 – Kenkron

由于剪辑需要路径？也许你错过了它的文档。下面是MDN文件说：

画布2D API的CanvasRenderingContext2D.clip（）方法转动路径目前已被当前的剪贴路径。

（重点煤矿）

它需要一个路径的原因是因为限幅掩模可以是从矩形到圈子任意形状皮卡丘的轮廓。

为了完整起见，这里就是W3C规范说，大约.clip()：

https://www.w3.org/TR/2dcontext/#drawing-paths-to-the-canvas

上下文。 clip（）将剪辑区域进一步限制为当前路径。

来源

2016-08-17 02:39:43 slebetman

是不是已经有一条路了？也许你错过了这个问题。以下是代码片段所说的内容：'ctx.rect（clip.x，clip.y，clip.width，clip.height）; ctx.clip（）;'这不起作用的原因是因为路径代码在那里在这两种情况下。为了完整起见，下面是W3C规范关于'rect（）'所说的内容：[为矩形创建一个路径]（https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/ RECT） – Kenkron

为什么javascript canvas2d裁剪需要路径？

回答

相关问题