本篇内容主要讲解“html5中怎么通过Canvas实现透明度处理”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“html5中怎么通过Canvas实现透明度处理”吧!

一 定义和用法

getImageData()方法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。

注意：ImageData对象不是图像，它规定了画布上一个部分（矩形），并保存了该矩形内每个像素的信息。

对于ImageData对象中的每个像素，都存在着四方面的信息，即RGBA值：

R - 红色（0-255）

G - 绿色（0-255）

B - 蓝色（0-255）

A - alpha 通道（0-255; 0 是透明的，255 是完全可见的）

color/alpha 信息以数组形式存在，并存储于 ImageData 对象的 data 属性中。

提示：在操作完成数组中的 color/alpha 信息之后，您可以使用 putImageData() 方法将图像数据拷贝回画布上。

二 代码

<!DOCTYPEhtml><html><head><metaname="author"content="Yeeku.H.Lee(CrazyIt.org)"/><metahttp-equiv="Content-Type"content="text/html;charset=GBK"/><title>改变透明度</title></head><body><h3>改变透明度</h3><canvasid="mc"width="600"height="460"></canvas><scripttype="text/javascript">//获取canvas元素对应的DOM对象varcanvas=document.getElementById('mc');//获取在canvas上绘图的CanvasRenderingContext2D对象varctx=canvas.getContext('2d');varimage=newImage();image.src="test.png";image.onload=function(){//用带透明度参数的方法绘制图片drawImage(image,124,20,0.4);}vardrawImage=function(image,x,y,alpha){//绘制图片ctx.drawImage(image,x,y);//获取从x、y开始，宽为image.width、高为image.height的图片数据//也就是获取绘制的图片数据varimgData=ctx.getImageData(x,y,image.width,image.height);for(vari=0,len=imgData.data.length;i<len;i+=4){//改变每个像素的透明度imgData.data[i+3]=imgData.data[i+3]*alpha;}//将获取的图片数据放回去。ctx.putImageData(imgData,x,y);}</script></body></html>

到此，相信大家对“html5中怎么通过Canvas实现透明度处理”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！