设计用哪些网站有哪些功能,弄个app要花多少钱,手机网站推荐大全,互动平台网站建设createImageData() 方法创建新的空白 ImageData 对象。新对象的默认像素值 transparent black。 对于 ImageData 对象中的每个像素#xff0c;都存在着四方面的信息#xff0c;即 RGBA 值#xff1a; R - 红色 (0-255)G - 绿色 (0-255)B - 蓝色 (0-255)A - alpha 通道 (0-25…createImageData() 方法创建新的空白 ImageData 对象。新对象的默认像素值 transparent black。 对于 ImageData 对象中的每个像素都存在着四方面的信息即 RGBA 值 R - 红色 (0-255)G - 绿色 (0-255)B - 蓝色 (0-255)A - alpha 通道 (0-255; 0 是透明的255 是完全可见的)因此 transparent black 表示 (0,0,0,0)。 color/alpha 以数组形式存在并且既然数组包含了每个像素的四条信息数组的大小是 ImageData 对象的四倍。获得数组大小有更简单的办法就是使用 ImageDataObject.data.length ImageDataObject.data.length ImageDataObject.width*ImageDataObject.height*4; 包含 color/alpha 信息的数组存储于 ImageData 对象的 data 属性中。 提示在操作完成数组中的 color/alpha 信息之后您可以使用 putImageData() 方法将图像数据拷贝回画布上。 有两个版本的 createImageData() 方法 1. 以指定的尺寸以像素计创建新的 ImageData 对象 var imgDatacontext.createImageData(width,height); 2. 创建与指定的另一个 ImageData 对象尺寸相同的新 ImageData 对象不会复制图像数据 var imgDatacontext.createImageData(imageData); !DOCTYPE html
html langenheadmeta charsetUTF-8titlecreateImageData/title
/headbodycanvas idmyCanvas width800 height400your browser does not support canvas/canvasscript typetext/javascriptvar c document.getElementById(myCanvas);var ctx c.getContext(2d);var img new Image();img.src face.jpg;img.onload function() {// 从10,10坐标开始绘制整个图片ctx.drawImage(img, 10, 10);var imgData ctx.getImageData(50, 50, 200, 200);var imgData01 ctx.createImageData(imgData);for (var i 0; i imgData01.width * imgData01.height * 4; i 4) {imgData01.data[i 0] 255;imgData01.data[i 1] 0;imgData01.data[i 2] 0;imgData01.data[i 3] 255;}ctx.putImageData(imgData01, 10, 260);var imgData02 ctx.createImageData(100, 100);for (i 0; i imgData02.width * imgData02.height * 4; i 4) {imgData02.data[i 0] 255;imgData02.data[i 1] 0;imgData02.data[i 2] 0;imgData02.data[i 3] 155;}ctx.putImageData(imgData02, 220, 260);};/script
/body/html 转载于:https://www.cnblogs.com/stono/p/4670258.html
