html/html5 案例 - W3xue在线HTML/CSS/JS运行工具

​x
 
<!DOCTYPE html>
<html>
<body>
​
<img src="/img/eg_tulip.jpg" id="tulip" alt="The Tulip" style="margin-left:10px;" />
​
<p>使用 getImageData() 来反转画布上的图像的每个像素的颜色。</p>
​
<canvas id="myCanvas2" width="450" height="300" style="border:1px solid #d3d3d3;background:#ffffff; margin-top:15px;">
Your browser does not support the HTML5 canvas tag.
</canvas>
​
<script>
var c=document.getElementById("myCanvas2");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,0,0);
var imgData=ctx.getImageData(0,0,c.width,c.height);
// 反转颜色
for (var 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);
</script> 
​
</body>
</html>