编程狮在线代码实例

Tab
<>
""
''
()
{}
[]
/
:
;
?
,
.
$
输入
运行
xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
</head>
<body>
​
<img id="scream" src="/attachments/image/20161109/1478674768430227.jpg">
<canvas id="myCanvas" width="220" height="277" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。
</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);
    // 反转颜色
    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>
实例代码
运行结果