简单教程
提交运行
代码编辑器：
<canvas id="canvas-2" width="300" height="300" style="border:1px solid #d3d3d3;background:#ffffff;">你的浏览器不支持 canvas 元素</canvas> <script> var img2 = document.createElement("img"); img2.src= "/static/i/img3.jpg"; img2.onload = function(){ var c=document.getElementById("canvas-2"); 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>
运行结果：