标签:family 标记 图像 屏幕 pre 设置 坐标 透明度 array
canvas绘制图片的三种方法:
drawImage(image, x, y)
drawImage(image, x, y, width, height)
drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight,destX, destY, destWidth, destHeight)
参数:
image:所要绘制的图像。这必须是表示 <img> 标记或者屏幕外图像的 Image 对象,或者是 Canvas 元素
x,y:要绘制的图像的左上角的位置。
width,height:图像所应该绘制的尺寸。指定这些参数使得图像可以缩放
sourceX,sourceY: 图像将要被绘制的区域的左上角。这些整数参数用图像像素来度量
sourceWidth, sourceHeight:图像所要绘制区域的大小,用图像像素表示
destX, destY:所要绘制的图像区域的左上角的画布坐标
destWidth, destHeight:图像区域所要绘制的画布大小
对canvas绘制的图片处理:
1、复制画布上指定的矩形的像素数据
var imageDatas = ctx.getImageData(x, y, width, height);
参数:
x,y:复制的左上角位置的 x、y 坐标。
width,heigth:将要复制的矩形区域的宽度、高度
2、获取指定矩形区域的rgba
var dataArray = imageDatas.data;
3、通过for循环对每个像素点设置新的rgba
如反色:255 减去 r g b 现在的值
灰色处理(r g b等值):可以将现在的 r g b 加起来除以3再分别赋值
透明度:设置dataArray[i + 3]的值即可
4、图像数据放回画布上
ctx.putImageData(imageDatas,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);
参数:
imageDatas:放回画布的 imageDatas对象
x,y:要绘制的图像的左上角的位置
dirtyX,dirtyY(可选):在画布上放置图像的位置
dirtyWidth,dirtyHeight(可选):在画布上绘制图像所使用的宽度、高度。
如下代码为设置透明度。
var imageDatas = ctx.getImageData(0, 0, 450, 450); //复制画布上指定的矩形的像素数据 var dataArray = imageDatas.data; //获取矩形区域的 rgba,范围均是(0-255) for (var i = 0 ; i < dataArray.length ; i += 4) { var r = dataArray[i]; //设置新的 rgba var g = dataArray[i+1]; var b = dataArray[i+2]; var a = dataArray[i + 3]; //此处代表图片的透明度(透明度也是 0-255) dataArray[i] = r; //赋予矩形区域新的 rgba 值 dataArray[i + 1] = g; dataArray[i + 2] = b; dataArray[i + 3] = a * 0.2; } ctx.putImageData(imageDatas, 0, 0);
标签:family 标记 图像 屏幕 pre 设置 坐标 透明度 array
原文地址:http://www.cnblogs.com/intangible/p/6683621.html