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,我们将及时处理。
微信扫码关注
更新实时通知