龙空技术网

web前端:canvas文本获取/放入像素ImageData

一刀coder 182

前言:

现在朋友们对“jquery获取body的text”大约比较珍视,姐妹们都需要知道一些“jquery获取body的text”的相关资讯。那么小编同时在网摘上收集了一些关于“jquery获取body的text””的相关内容,希望兄弟们能喜欢,小伙伴们快快来了解一下吧!

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>12345678910111213141516171819202122
6.效果图

canvas

标签: #jquery获取body的text