0

我一直在努力弄清楚为什么我的 PNG 着色不起作用。我想要：

  1. 创建一个画布。
  2. 在里面画一个矩形。
  3. 剪辑矩形，以便后续绘图发生在矩形内。
  4. 在矩形内引入几个形状。
  5. 在矩形内也引入一个PNG（带有透明区域）。
  6. 为Png着色，其中下面的形状通过透明区域显示，PNG可以通过任何颜色切换。

我感到非常沮丧，以至于我一直在简化以找到问题的根源，直到我刚刚从 W3schools 网站复制了最简单的一段代码，而这种简单的图像着色不起作用！为什么当我在 W3site 上查看这个简单的示例时它可以工作，但是当我将它逐字复制到我的计算机上时（更改图像名称和 src）它不起作用？

我得到了最新的 Chrome。这是来自 W3schools 的代码。

<!DOCTYPE html>
<html>
<body>

<img id="scream" src="supportArt/scream.jpg" alt="The Scream" width="220" height="277">
<canvas id="myCanvas" width="220" height="277" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
document.getElementById("scream").onload = function() {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("scream");
    ctx.drawImage(img, 0, 0);
    var imgData = ctx.getImageData(0, 0, c.width, c.height);
    // invert colors
    var i;
    for (i = 0; i < imgData.data.length; i += 4) {
        imgData.data[i] = 255 - imgData.data[i];
        imgData.data[i+1] = 255 - imgData.data[i+1];
        imgData.data[i+2] = 255 - imgData.data[i+2];
        imgData.data[i+3] = 150;
    }
    ctx.putImageData(imgData, 0, 0);
};
</script>

</body>
</html>
4

1 回答 1

1

您的代码对于支持 html5 的浏览器来说绝对没问题（正如您提到的，您使用的是最新的 Chrome）。当您尝试使用 file : / /.. 实际上你的“getImageData”将不起作用。最简单的解决方案是将文件托管在某个地方（例如 box.com 也可以使用），或者如果您在本地工作，则可以将其托管在 IIS 中并使用http://localhost/而不是 file:// 浏览它。这将正常工作。

于 2015-11-02T16:04:14.473 回答