Html 画布中的反向剪辑

我想剪辑html5画布，这样我就可以实现绘图结果如下图所示

我希望实现剪辑路径，以便所有绘图仅在黑色区域执行。

---

您可以使用分层来满足您的需求：

• 制作一份全黑透明的图像副本
• 在画布上绘制原始图像
• 画出你想要的形状
• 在顶部绘制透明图像

演示：

此函数创建一个临时画布，其中指定的颜色范围为透明：

function makeImageTransparentByColor(image,r1,r2,g1,g2,b1,b2){
    // create a temporary canvas and draw the image on the canvas 
    var bk=document.createElement("canvas");
    var bkCtx=bk.getContext("2d");
    bk.width=image.width;
    bk.height=image.height
    bkCtx.drawImage(image,0,0);
    // get the pixel array from the canvas
    var imgData=bkCtx.getImageData(0,0,bk.width,bk.height);
    var data=imgData.data;
    // loop through each pixel and make every pixel transparent
    // that is between r1-r2, g1-g2 and b1-b2
    for(var i=0;i<data.length;i+=4){
        var r=data[i];
        var g=data[i+1];
        var b=data[i+2]
        if(r>=r1 && r<=r2 && g>=g1 && g<=g2 && b>=b1 && b<=b2){
            data[i]=0;
            data[i+1]=0;
            data[i+2]=0;
            data[i+3]=0;
        }
    }
    // put the modified pixels back on the canvas
    bkCtx.putImageData(imgData,0,0);
    // return the canvas with transparent image
    return(bk);
}

函数makeImageTransparentByColor（图像、r1、r2、g1、g2、b1、b2）{ //创建临时画布并在画布上绘制图像 var bk=document.createElement（“画布”）； var bkCtx=bk.getContext（“2d”）； bk.width=image.width； bk.height=image.height bkCtx.drawImage（图像，0,0）； //从画布获取像素阵列 var imgData=bkCtx.getImageData（0,0，bk.width，bk.height）； var数据=imgData.data； //循环遍历每个像素并使每个像素透明 //即介于r1-r2、g1-g2和b1-b2之间 对于（变量i=0；i=r1&&r=g1&&g=b1&&B方法1 假设白色区域是透明的，黑色区域是不透明的，则可以使用复合模式：

ctx.globalCompositeOperation = 'source-in';
... draw graphics on top - only solid color will be affected ...
ctx.globalCompositeOperation = 'source-over';      // reset to default mode

方法2 另一种更简单的方法是用所需的图形填充画布，然后对需要透明的区域使用

clearRect（）

此操作相当快，因此不应出现任何闪烁（如果您可以通过单个

requestAnimationFrame

调用触发此操作）

请注意，调用rAF会使代码异步，但使用rAF的目的是在帧更新中同步绘制操作，因此闪烁将被删除（如果您出于某种原因遇到问题）

方法3 通过一系列调用

rect（）

，围绕要保留的区域创建矩形区域。使用

clip（）

将其设置为剪裁遮罩

如果非剪裁区域按特定顺序排列，或者您必须定义许多区域，则此技术效果最佳

请记住首先平移画布0.5像素，并且仅对矩形使用整数值

方法4 手动解析像素缓冲区以填充满足要求的区域中的像素，例如，仅非透明像素

请注意，这可能是最慢的方法，它受CORS限制的影响（如果您先在画布上绘制外部图像），如果您希望填充形状、图像、渐变等，则会更加繁琐，如果您希望从屏幕外的画布进行复制，则可能会更麻烦

---

还有其他使用不同合成模式和绘图顺序的方法来实现相同的结果，但我将其保留下来，因为它应该涵盖大多数场景。

这与（iOS和OSX上的图形框架标签）有什么关系？对不起，我不知道什么是核心图形。只是从建议列表中选择。你可以将鼠标悬停在标签上，查看它们的简要描述，看看它们是否真的符合你的问题。方法2的可能重复正是我所需要的，谢谢。一旦我读到它，它是如此明显，以至于我一开始就对自己错过它感到恼火。