Question

我把头发拉过这个虫子一段时间了。我想在画布的三个部分中渲染图像，而不允许它们重叠。基本上，我想使用ItemView/LayoutView来保持图像分离。但是，剪辑仅在我绘制图像后调用canvas.getContext('2d').clip()时才有效。

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

canvas.getContext('2d').beginPath()

但这样做：

    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; };解决了这个问题并且我不知道为什么，这是一个完全意外的事故。任何人都可以向我解释这个吗？

Answer 1

因为剪辑需要一条路径？也许你在文档中错过了它。以下是MDN文档所说的内容：

Canvas 2D API的CanvasRenderingContext2D.clip（）方法将当前构建的路径转换为当前剪切路径。

（强调我的）

它需要路径的原因是因为剪裁蒙版可以是从矩形到圆形到皮卡丘轮廓的任意形状。

为了完整起见，这里是W3C规范关于.clip()的说法：

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

背景。夹（）进一步将剪切区域约束到当前路径。

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

1 个答案: