小编Kas*_*Sky的帖子

我正在关注WC3上的教程:http://www.w3schools.com/tags/canvas_getimagedata.asp

我把我的图像加载了,旁边是画布,我有一个漂亮的寄宿生,我打算显示并排图像.我试图反转像素的颜色作为演示,但我不能让颜色改变我不明白为什么.

这是我的代码笔,我将HTML与JS分开:http: //codepen.io/kKasper/pen/zBXWOZ

document.getElementById("team").onload = function() {
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("team");
    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] = 255;
    }
    ctx.putImageData(imgData, 0, 0);
};

看来是ctx.drawImage(img,0,0); 正在画布中绘制我的图像.出于某种原因,在WC3教程上工作的功能在我的图像上无法正常工作,因为当它在函数之后绘制图像时没有任何变化.

有人可以帮我解决这个问题吗？