全国服务热线:4008-888-888

技术知识

Canvas 像素解决之更改全透明度的完成编码

1 界定和用法

getImageData()方式回到 ImageData 目标,该目标复制了画布特定矩形框的像素数据信息。

留意:ImageData目标并不是图象,它要求了画布上1个一部分(矩形框),并储存了该矩形框内每一个像素的信息内容。

针对ImageData目标中的每一个像素,都存在着4层面的信息内容,即RGBA值:

  • R - 鲜红色(0⑵55)
  • G - 翠绿色(0⑵55)
  • B - 蓝色(0⑵55)

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 运作結果

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服