Canvas 像素处理之改变透明度的实现代码


Posted in HTML / CSS onJanuary 08, 2019

一 定义和用法

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() 方法将图像数据拷贝回画布上。

二 代码

<!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>

三 运行结果

Canvas 像素处理之改变透明度的实现代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
Mar 17 HTML / CSS
css3学习系列之移动属性详解
Jul 04 HTML / CSS
如何用css3实现switch组件开关的方法
Feb 09 HTML / CSS
css3实现二维码扫描特效的示例
Oct 29 HTML / CSS
canvas基础之图形验证码的示例
Jan 02 HTML / CSS
HTML5 Canvas 破碎重组的视频特效的示例代码
Sep 24 HTML / CSS
基于IE10/HTML5 开发
Apr 22 HTML / CSS
用canvas实现图片滤镜效果附演示
Nov 05 HTML / CSS
html5需遵循的6个设计原则
Apr 27 HTML / CSS
h5使用canvas画布实现手势解锁
Jan 04 HTML / CSS
浅谈CSS不规则边框的生成方案
May 25 HTML / CSS
bootstrapv4轮播图去除两侧阴影及线框的方法
Feb 15 HTML / CSS
详解Canvas实用库Fabric.js使用手册
Jan 07 #HTML / CSS
Html5原创俄罗斯方块(基于canvas)
Jan 07 #HTML / CSS
h5使用canvas画布实现手势解锁
Jan 04 #HTML / CSS
canvas中普通动效与粒子动效的实现代码示例
Jan 03 #HTML / CSS
详解webapp页面滚动卡顿的解决办法
Dec 26 #HTML / CSS
Html5调用手机摄像头并实现人脸识别的实现
Dec 21 #HTML / CSS
HTML5的postMessage的使用手册
Dec 19 #HTML / CSS
You might like
PHP JSON 数据解析代码
2010/05/26 PHP
PHP中仿制 ecshop验证码实例
2017/01/06 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
Array.prototype.slice.apply的使用方法
2010/03/17 Javascript
javascript客户端解决方案 缓存提供程序
2010/07/14 Javascript
validator验证控件使用代码
2010/11/23 Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
2011/07/13 Javascript
Javascript中引用示例介绍
2014/02/21 Javascript
Jquery api 速查表分享
2015/01/12 Javascript
js简单判断移动端系统的方法
2016/02/25 Javascript
聊一聊JS中this的指向问题
2016/06/17 Javascript
JS添加或修改控件的样式(Class)实现方法
2016/10/15 Javascript
javascript九宫格图片随机打乱位置的实现方法
2017/03/15 Javascript
node.js之基础加密算法模块crypto详解
2018/09/11 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
2019/04/25 Javascript
vue实现路由懒加载及组件懒加载的方式
2019/06/11 Javascript
JS精确判断数据类型代码实例
2019/12/18 Javascript
vue 出现data-v-xxx的原因及解决
2020/08/04 Javascript
python操作日期和时间的方法
2014/03/11 Python
python实现支持目录FTP上传下载文件的方法
2015/06/03 Python
Python实现将文本生成二维码的方法示例
2017/07/18 Python
Python语言描述随机梯度下降法
2018/01/04 Python
python生成不重复随机数和对list乱序的解决方法
2018/04/09 Python
Python 实现在文件中的每一行添加一个逗号
2018/04/29 Python
python 实现对数据集的归一化的方法(0-1之间)
2018/07/17 Python
使用Django简单编写一个XSS平台的方法步骤
2019/03/25 Python
CSS3实现文字描边的2种方法(小结)
2020/02/14 HTML / CSS
Superdry瑞典官网:英国日本街头风品牌
2017/05/17 全球购物
大学生的网上创业计划书
2013/12/31 职场文书
图书室管理制度
2014/01/19 职场文书
大学毕业生求职自荐书
2014/06/05 职场文书
上班迟到检讨书300字
2014/10/18 职场文书
小学元宵节活动总结
2015/02/06 职场文书
2015年小学教科研工作总结
2015/07/20 职场文书
Spring实现内置监听器
2021/07/09 Java/Android
CSS3中Animation实现简单的手指点击动画的示例
2021/07/15 HTML / CSS