HTML5图像填充createPattern() putImageData()图像数据获得和写入
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/post/7445.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
版权声明
本文仅代表作者观点，不代表本站立场。
本文系作者授权发表，未经许可，不得转载。
