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 相关文章推荐
CSS3字体效果的设置方法小结
Jun 13 HTML / CSS
10个很棒的 CSS3 开发工具 推荐
May 16 HTML / CSS
纯css3实现走马灯效果
Dec 26 HTML / CSS
CSS3 实现发光边框特效
Nov 11 HTML / CSS
html5使用Canvas绘图的使用方法
Nov 21 HTML / CSS
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
Oct 20 HTML / CSS
html5 worker 实例(二) 图片变换效果
Jun 24 HTML / CSS
【HTML5】3D模型--百行代码实现旋转立体魔方实例
Dec 16 HTML / CSS
canvas裁剪clip()函数的具体使用
Mar 01 HTML / CSS
html5+css如何实现中间大两头小的轮播效果
Dec 06 HTML / CSS
amazeui时间组件的实现示例
Aug 18 HTML / CSS
企业开发CSS命名BEM代码规范实践
Feb 12 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下过滤HTML代码的函数
2007/12/10 PHP
PHP 木马攻击防御技巧
2009/06/13 PHP
yii2控制器Controller Ajax操作示例
2016/07/23 PHP
基于Swoole实现PHP与websocket聊天室
2016/08/03 PHP
Prototype使用指南之selector.js说明
2008/10/26 Javascript
js的闭包的一个示例说明
2008/11/18 Javascript
Javascript 学习笔记 错误处理
2009/07/30 Javascript
25个非常棒的jQuery滑块插件和教程小结
2011/09/02 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
2013/10/17 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
2014/06/06 Javascript
node.js中 stream使用教程
2016/08/28 Javascript
浅述节点的创建及常见功能的实现
2016/12/15 Javascript
jQuery Masonry瀑布流布局神器使用详解
2017/05/25 jQuery
NodeJS链接MySql数据库的操作方法
2017/06/27 NodeJs
浅谈在fetch方法中添加header后遇到的预检请求问题
2017/08/31 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
2018/08/22 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
2020/05/27 Javascript
python局部赋值的规则
2013/03/07 Python
wxpython实现图书管理系统
2018/03/12 Python
Win7 64位下python3.6.5安装配置图文教程
2020/10/27 Python
Python基于更相减损术实现求解最大公约数的方法
2018/04/04 Python
Python实现FTP文件传输的实例
2019/07/07 Python
OpenCV+face++实现实时人脸识别解锁功能
2019/08/28 Python
python求绝对值的三种方法小结
2019/12/04 Python
Python request操作步骤及代码实例
2020/04/13 Python
python 实现关联规则算法Apriori的示例
2020/09/30 Python
幼儿园安全检查制度
2014/01/30 职场文书
大学生未来职业生涯规划书
2014/02/15 职场文书
学校志愿者活动总结
2014/06/27 职场文书
不听老师话的万能检讨书
2014/10/04 职场文书
学校重阳节活动总结
2015/03/24 职场文书
工程技术负责人岗位职责
2015/04/13 职场文书
消防安全月活动总结
2015/05/08 职场文书
党小组考察意见
2015/06/02 职场文书
初中政治教学反思
2016/02/23 职场文书
插件导致ECharts被全量引入的坑示例解析
2022/09/23 Javascript