首页 | 简单教程,简单编程

代码编辑器：

<canvas id="myCanvas" width="220" height="277" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签
</canvas>
<script>
(function(){
    var img1 = document.createElement("img");

img1.src = "/static/i/icon1.png";
    img1.onload=function(){
        var c=document.getElementById("myCanvas");
        var canvOK=1;
        try {c.getContext("2d");}
        catch (er) {canvOK=0;}
        if (canvOK==1)
        {
            var ctx=c.getContext("2d");
            var img=this;
            ctx.drawImage(img,10,10);
            var imgData=ctx.getImageData(0,0,c.width,c.height);
            for (i=0; i < imgData.width*imgData.height*4;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);
        }
    }
})();
</script>

代码编辑器：

运行结果：