HTML5图像填充createPattern() putImageData()图像数据获得和写入

时间：6年前阅读：4123

createPattern() 方法在指定的方向内重复指定的元素。元素可以是图片、视频，或者其他 <canvas> 元素。被重复的元素可用于绘制/填充矩形、圆形或线条等等。

.getImageData(20,20,200,100)

获得指定区域内的所有像素点的信息(从图征的左边20，上面20开始，获取区域左边200，高100的区域)

<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title></title>    
		<style type="text/css">    
			canvas{    
				background: #272822;    
			}    
		</style>    
	</head>    
	<body>    
		<canvas id="canvas" width="800" height="500"></canvas>    
		<script type="text/javascript">    
			var canvas = document.getElementById('canvas');    
			var cv = canvas.getContext('2d');    
//			创建图片资源    
			var newimg = new Image();    
			newimg.src = '../sw/tu/t10.jpg';    
//guize拼音规则    createPattern来指定重复的图像！newimg把这个引进来,用这个图片建填充规则,repeat这个图片重复,    
		var guize =	cv.createPattern(newimg,'repeat');    
//		画一个矩形区域rect填充图片    
//距离左边10,上面10开始.宽度700,高度450    
		cv.rect(10,10,700,450);    
//		这个距形用guize这个规则来填充平铺图片    
		cv.fillStyle = guize;    
		cv.fill();    
		</script>    
	</body>    
</html>

<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title></title>    
		<style type="text/css">    
			canvas{    
				background: #272822;    
			}    
		</style>    
	</head>    
	<body>    
		<canvas id="canvas" width="800" height="500"></canvas>    
		<script type="text/javascript">    
			var canvas = document.getElementById('canvas');    
			var cv = canvas.getContext('2d');    
//			创建图片资源    
			var newimg = new Image();    
			newimg.src = '../sw/tu/t10.jpg';    
//			onload 事件    
			newimg.onload = function(){    
//				将图片画入画板    
				cv.drawImage(newimg,10,10)    
//			获得指定区域内的所有像素点的信息(从图征的左边20，上面20开始，获取区域左边200，高100的区域)    
var alldata = cv.getImageData(20,20,200,100);    
//          alldata.data    
//			将图像信息写入画板   把这个(alldata图像信息作为第一个参数写入进来    
			cv.putImageData(alldata,550,350);    
		}    
		</script>    
	</body>    
</html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

HTML5图像填充createPattern() putImageData()图像数据获得和写入

网友评论