介绍 <李> & lt; ! DOCTYPE html>
& lt; html>
& lt; head>
,& lt; meta name=癮uthor",内容=癥eeku.H.Lee (CrazyIt.org)“,/比;
,& lt; meta http-equiv=癈ontent-Type",内容=皌ext/html;, charset=GBK",/比;
,& lt; title>改变透明度,& lt;/title>
& lt;/head>
& lt; body>
& lt; h3>,改变透明度,& lt;/h3>
& lt; canvas id=癿c",宽度=?00“,身高=?60”;
,风格=氨呔?1 px solid black"祝辞& lt;/canvas>
& lt; script 类型=拔谋?javascript"比;
,//获取帆布元素对应的DOM对象
,var canvas =, . getelementbyid (& # 39; mc # 39;);
,//获取在画布上绘图的CanvasRenderingContext2D对象
,var ctx =, canvas.getContext (& # 39; 2 d # 39;);
,var image =, new 图像();=,image.src “test.png";=,image.onload 函数()
,{//才能,用带透明度参数的方法绘制图片
drawImage才能(image ,, 124,,,, 20,,, 0.4);
,}
,var drawImage =,函数(image ,, x ,,, y ,,α)
,{//,才能绘制图片
ctx.drawImage才能(image ,, x ,, y);//,才能获取从x, y开始,宽为image.width,高为image.height的图片数据//才能,也就是获取绘制的图片数据
var 才能;imgData =, ctx.getImageData (x ,, y ,, image.width ,, image.height);
for 才能;(var 小姐:=,0,,,len =, imgData.data.length ;,小姐:& lt;, len ;,小姐:+=,4,)
{才能//,,,改变每个像素的透明度
,,imgData.data[小姐:+,3],=,imgData.data[小姐:+,3],*,α;
,,}//,才能将获取的图片数据放回的去。
ctx.putImageData才能(imgData ,, x ,, y);
,}
& lt;/script>
& lt;/body>
& lt;/html>
这篇文章给大家分享的是有关帆布像素处理之如何改变透明度的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
<强>一定义和用法
getImageData()方法返回ImageData对象,该对象拷贝了画布指定矩形的像素数据。
注意:ImageData对象不是图像,它规定了画布上一个部分(矩形),并保存了该矩形内每个像素的信息。
对于ImageData对象中的每个像素,都存在着四方面的信息,即RGBA值:
R -红色(0 - 255)
<李>G -绿色(0 - 255)
<李>B -蓝色(0 - 255)
A -α通道(0 - 255;0是透明的,255是完全可见的)
颜色/α信息以数组形式存在,并存储于ImageData对象的数据属性中。
提示:在操作完成数组中的颜色/α信息之后,您可以使用putImageData()方法将图像数据拷贝回画布上。
<强>二代码
<强>三运行结果
感谢各位的阅读!关于“画布像素处理之如何改变透明度”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
