canvas 操作像素反相

攻城狮玉卿技术 2022年11月6日

0 收藏 326 点赞 1,146 浏览 809 个字

代码实例：

<!DOCTYPE html>
<html>
<head>
<style>
canvas{
background:#eee;
}
</style>
<title>实例</title>
<meta charset="utf-8">
<link rel="stylesheet" href="" rel="external nofollow" >
<script>
window.onload=function  () {
                var canvas = document.getElementById("canvas");
                var ctx = canvas.getContext("2d");
                //绘制图片
                var img=document.getElementById("img");
                ctx.drawImage(img,0,0,200,200);                var imgData=ctx.getImageData(0,0,200,200);
                ctx.putImageData(draw(imgData),200,200);
               //方法：反色
               function draw(imgData){
                   for (var i=0;i<imgData.width*imgData.height;i++) {
                       imgData.data[i*4+0]=255-imgData.data[i*4+0];
                       imgData.data[i*4+1]=255-imgData.data[i*4+1];
                       imgData.data[i*4+2]=255-imgData.data[i*4+2];
                       imgData.data[i*4+3]=imgData.data[i*4+3];
                   }
                   return imgData;
               }            }
</script>x
</head>
<body>
<canvas id="canvas" width=500 height=500>
</canvas>
    <img src="不二2.jpg" id="img" hidden>
</body>
</html>