web前端：canvas绘制画布，文本居中，获取像素点getImageData、放入像素数据putImageData，图文详解

本文链接：https://blog.csdn.net/weixin_37056888/article/details/113177371

1.canvas-font居中图解

canvas

2.canvas像素计算pixel图解

canvas

3.less

* {
    margin: 0;
    padding: 0;
    #wrap {
        width: 600px;
        height: 800px;
        background: tomato;
        border: 2px solid white;
        border-radius: 5%;
        //这里不可使用position，会影响画布的坐标定位
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: 5% auto;
        font: 20px "微软雅黑";
        text-align: center;
        color: white;
        transition: 2s;
        &:hover {
            background: steelblue;
        }
        h1 {
            margin-top: 8%;
        }
        h2 {
            margin-left: 30%;
            margin-top: 100%;
        }
        #wrap-canvas {
            position: absolute;
            background: lightgoldenrodyellow;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    }
}

4.js

/*canvas中可以使用ImageData对象操纵像素数据
 * 1. getImageData()：包含画布区域的对象像素数据，封装为ImageData对象
 *   |- getImageData(x,y,w,h)
 *      x/y:被提取的图像数据，矩形区域的左上角x、y像素，单位是像素
 * 		w/h：被提取的图像数据，矩形区域的宽度、高度，单位是像素
 *   |- data：Unit8ClampedArray类型的一维数组，包含RGBA格式的整型数据，范围在0-255（黑色到白色） A（0-255范围opacity）为不透明度
 * 2. putImageData(imgData,x,y) 写入像素数据
 *      x/y：let、top坐标，默认左上角
 * 3. createImageData(width,height) 创建像素数据
 */
$(function(){
	var canvasNode=document.querySelector("#wrap-canvas");
	if(canvasNode.getContext){
		var canvasPen=canvasNode.getContext("2d");
		canvasPen.save();
		canvasPen.fillStyle="steelblue";
		canvasPen.beginPath();
		canvasPen.fillRect(0,0,100,100);
		canvasPen.restore();
		//1.获取像素data:应该是100*100=10000个像素点，实际是Uint8ClampedArray(40000)，rgba像素*4
		var imageData=canvasPen.getImageData(0,0,50,50);
		console.log("steel blue的imageData-rgba：",imageData);
		
		/* 2.创建imageData
		 * putImageData(imgData,x,y) 写入像素数据
		 *      x/y：let、top坐标，默认左上角
		 * createImageData(width,height) 创建像素数据
		 */
		canvasPen.save();
		var newImageData=canvasPen.createImageData(100,100);
		canvasPen.beginPath();
		for(var i=0;i<newImageData.data.length;i++){
			newImageData.data[4*i+3]=100;
		};
		canvasPen.putImageData(newImageData,100,100);
		canvasPen.restore();
		
		//3.获取像素点
		canvasPen.save();
		canvasPen.fillStyle="tomato";
		canvasPen.beginPath();
		canvasPen.fillRect(200,200,100,100);
		canvasPen.restore();
		var getImage=canvasPen.getImageData(200,200,canvasNode.width,canvasNode.height);
		//这里的(imagedata=get到的ImageData定位坐标，left：300=0 top：300=0  最高left/top=100，超出100即为0,0,0,0白色)
		var getImageColor=getPixelColor(getImage,50,50);
		console.log("tomato获取到的imageColor：",getImageColor);//[255, 99, 71, 255]
		
		//4.改变像素
		canvasPen.save();
		canvasPen.fillStyle="deepskyblue";
		canvasPen.beginPath();	
		canvasPen.fillRect(300,300,100,100);
		//canvasPen.putImageData(setImage,300,300);
		canvasPen.restore();
		//4.1获取画布宽度及图像位置
		var setImage=canvasPen.getImageData(300,300,canvasNode.width,canvasNode.height);
		//4.2设置图像颜色
		setPixelColor(setImage,50,50,[0,0,0,255]);
		//4.3放入图像:颜色点
		//canvasPen.putImageData(setImage,300,300);
		//4.4整行/列替换颜色
		for(var i=0;i<setImage.width;i++){
			setPixelColor(setImage,i,50,[255,255,255,255]);
		}
		canvasPen.putImageData(setImage,300,300);
		console.log("set pixel color结果：",getImageColor);
	}
	
	//4.获取图像颜色
	function getPixelColor(img,x,y){
		var pixelColor=[];
		var pixelData=img.data;
		var pixelWidth=img.width;
		
		//获取颜色偏移量位置：column(y)*width(w)+row(x)
		//r
		pixelColor[0]=pixelData[(y*pixelWidth+x)*4];
		//g
		pixelColor[1]=pixelData[(y*pixelWidth+x)*4+1];
		//b
		pixelColor[2]=pixelData[(y*pixelWidth+x)*4+2];
		//a
		pixelColor[3]=pixelData[(y*pixelWidth+x)*4+3];
		return pixelColor;
	}
	
	function setPixelColor(img,x,y,pixelColor){
		var pixelData=img.data;
		var pixelWidth=img.width;
		
		pixelData[(y*pixelWidth+x)*4]=pixelColor[0];
		pixelData[(y*pixelWidth+x)*4+1]=pixelColor[1];
		pixelData[(y*pixelWidth+x)*4+2]=pixelColor[2];
		pixelData[(y*pixelWidth+x)*4+3]=pixelColor[3];
	}
})

5.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
		<title>canvas画布像素设置</title>
	</head>
	<link rel="stylesheet" href="../6-bootstrap/css/bootstrap.min.css" />
	<link rel="stylesheet" href="css/16-canvas-pixel-up.css" />
	<body>
		<div id="wrap">
			<h1>canvas动画-像素pixel</h1>
			<canvas id="wrap-canvas" width="500px" height="500px"></canvas>
			<h2>PS：一刀coder</h2>
		</div>
	</body>
	<script type="text/javascript" src="../6-bootstrap/js/jquery.min.js"></script>
	<script type="text/javascript" src="../6-bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/16-canvas-pixel-up.js"></script>

</html>

6.效果图

canvas