canvas 操作像素反相

代码实例：

<!DOCTYPE html>

<html>

	<head>

		<style>

		canvas{

		background:#eee;

		}

		</style>

		<title>实例</title>

		<meta charset="utf-8">

		<link rel="stylesheet" href="">

		<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>

　　图片：

效果：

2017-09-12 11:12:31

巴特西

canvas 操作像素反相

最新文章

热门文章

巴特西

canvas 操作像素 反相

最新文章

热门文章

canvas 操作像素反相