1 界定和用法
getImageData()方式回到 ImageData 目标，该目标复制了画布特定矩形框的像素数据信息。
留意：ImageData目标并不是图象，它要求了画布上1个一部分（矩形框），并储存了该矩形框内每一个像素的信息内容。
针对ImageData目标中的每一个像素，都存在着4层面的信息内容，即RGBA值：
A - alpha 安全通道（0⑵55; 0 是全透明的，255 是彻底可见的）
color/alpha 信息内容以数字能量数组方式存在，并储存于 ImageData 目标的 data 特性中。
提醒：在实际操作进行数字能量数组中的 color/alpha 信息内容以后，您可使用 putImageData() 方式将图象数据信息复制回画布上。
2 编码
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 更改全透明度 </title>
</head>
<body>
<h2> 更改全透明度 </h2>
<canvas id="mc" width="600" height="460"
style="border:1px solid black"></canvas>
<script type="text/javascript">
// 获得canvas元素对应的DOM目标
var canvas = document.getElementById('mc');
// 获得在canvas上制图的CanvasRenderingContext2D目标
var ctx = canvas.getContext('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 = imgData.data.length ; i < len ; i += 4 )
{
// 更改每一个像素的全透明度
imgData.data[i + 3] = imgData.data[i + 3] * alpha;
}
// 将获得的照片数据信息放回去。
ctx.putImageData(imgData , x , y);
}
</script>
</body>
</html>
3 运作結果
以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。
Copyright © 2002-2020 秀米制作h5_h5如何制作_h5小游戏制作_h5游戏开发_免费的h5制作网站 版权所有 （网站地图） 粤ICP备10235580号