canvas 像素操作

小灰灰 2021-07-24 20:43 372阅读 0赞

创建像素块
    	let imgData=ctx.createImageData(100,100);	创建100*100像素
    	let imgData=ctx.getImageData(10,10,50,50);	复制已有像素
    	let imgData=ctx.createImageData(imgData);	尺寸相同的新ImageData对象(不会复制图像数据)
    
    设置像素块样式
    	对于ImageData对象中的每个像素,都存在着四方面的信息,即RGBA值：
    	R - 红色 (0-255)
    	G - 绿色 (0-255)
    	B - 蓝色 (0-255)
    	A - alpha 通道 (0-255; 0 是透明的，255 是完全可见的)
    	新像素默认为(0,0,0,0)
    	
    	第一个像素块
    		imgData.data[0]=255;
    		imgData.data[1]=0;
    		imgData.data[2]=0;
    		imgData.data[3]=255;
      	第二个像素块
    		imgData.data[4]=255;
    		imgData.data[5]=0;
    		imgData.data[6]=0;
    		imgData.data[7]=255;
    
    获取所有像素块
    	imgData.data
    	
    	for (var i=0;i<imgData.data.length;i+=4)
    	{
    		imgData.data[i+0]=255;
    		imgData.data[i+1]=0;
    		imgData.data[i+2]=0;
    		imgData.data[i+3]=255;
    	}
    	
    拷贝图像像素数据
    	var imgData=ctx.getImageData(x,y,width,height);
    		x	开始复制的左上角位置的 x 坐标。
    		y	开始复制的左上角位置的 y 坐标。
    		width	将要复制的矩形区域的宽度。
    		height	将要复制的矩形区域的高度。
    	
    将图像像素数据放回画布上
    	ctx.putImageData(imgData,x,y);
    	context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);
     		imgData		规定要放回画布的 ImageData 对象。
    		x			ImageData对象左上角的x坐标,以像素计。
    		y			ImageData对象左上角的y坐标,以像素计。
    		dirtyX		可选,水平值(x),以像素计,在画布上放置图像的位置。
    		dirtyY		可选,水平值(y),以像素计,在画布上放置图像的位置。
    		dirtyWidth	可选,在画布上绘制图像所使用的宽度。
    		dirtyHeight	可选,在画布上绘制图像所使用的高度。
    
    颜色反转
    	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;
    	}

代码示例:

<html>
    <body>
    
    <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.
    </canvas>
    
    <script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle="green";
    ctx.fillRect(10,10,50,50);
    
    function copy()
    { 
    var imgData=ctx.getImageData(10,10,50,50);
    ctx.putImageData(imgData,10,70);
    }
    </script>
    
    <button onclick="copy()">复制</button>
    
    </body>
    </html>