canvas设置透明,canvas半透明

　　一 定义和用法

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

　　注意：ImageData对象不是图像，它定义了画布上的一个部分(矩形)，并保存矩形中每个像素的信息。

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

　　r-红色(0-255)G-绿色(0-255)B-蓝色(0-255)A-alpha通道(0-255；0透明，255完全可见)

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

　　提示：操作完成数组中的颜色/alpha信息后，可以使用putImageData()方法将图像数据复制回画布。

　　二 代码

　　！DOCTYPE html htmlhead meta name= author content= yee ku。h . Lee(crazy it . org)/meta http-equiv= Content-Type Content= text/html；Charset=GBK/title更改透明度/title/headbodyh2更改透明度/H2 canvas id= MC width= 600 height= 460 style= border:1px纯黑/canvas script type= text/Javascript //Get DOM object var canvas=document . getelementbyid( MC )对应canvas元素；//获取画布上绘制的CanvasRenderingContext2D对象var CTX=canvas . Get context( 2d )；var Image=new Image()；image . src= test . png ；Image.onload=function() {//用透明度参数画一张图片drawImage(image，124，20，0.4)；} var drawimage=function (image，x，y，alpha){//画图ctx.drawImage(image，x，y)；//从X和y得到宽度为image.width，高度为image.height的图像数据//即得到绘制的图像数据var imgdata=ctx.getimagedata (x，y，image.width，image . height)；for (var i=0，len=img data . data . length；我lenI=4) {//改变每个像素的透明度img data[i3]=img data[i3]* alpha；}//把采集到的图片数据放回去。ctx.putImageData(imgData，x，y)；}/脚本/正文/html三 运行结果

　　这就是本文的全部内容。希望对大家的学习和支持有帮助。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。