使用 HTML 5 Canvas 时，如何在 png 图像上划定透明区域？答案

【问题标题】：How can I delimit a transparent area on png image when I'm using HTML 5 Canvas?使用 HTML 5 Canvas 时，如何在 png 图像上划定透明区域？
【发布时间】：2014-05-01 10:31:45
【问题描述】：

当我尝试在 html5 画布中划定一个区域时遇到一些问题，我有这个 img：

我只想在 img 的白色部分而不是所有 img 上获得透明度。我在这部分代码中画了img：

    this.draw = function(){
        context.save();
        context.drawImage(sniperScoop, 0, 0, w,h);      
        context.restore();
    }

这可以使用 HTML 5 Canvas/Javascript 吗？

谢谢！

【问题讨论】：

为什么要保存上下文然后恢复它？这是完整的绘图功能还是只是其中的一部分？
你的问题对我来说有点不清楚。我认为您想拍摄上面的图像并将 rgb(255,255,255) 区域的不透明度设置为 0。如果是这样，请将图像绘制到画布上，获取画布的数据，然后检查所有像素以查看它们是否满足（白色）要求。如果是这样，只需将该数组元素的 alpha 值设置为 0。每个像素有 4 个数组元素，r、g、b 和 a。因此，第一个元素（r）的索引计算为：index = ((y * canvasWidthPixels) + x) * 4;

标签： javascript css html canvas png

【解决方案1】：

如果我是你，我会用 gimp 之类的程序编辑图像并剪掉白色部分。有什么理由不这样做吗？

【讨论】：

我试过了，但所有图像仍然是透明的，我只想要白色圆圈（我用 GIMP 切掉的）
哦，你已经做到了。对不起，我应该检查一下。你是说它仍然在图像透明的画布上绘制白色吗？这似乎是错误的..