Canvas globalCompositeOperation


Posted in HTML / CSS onDecember 18, 2018

在默认情况之下,如果在Canvas之中将某个物体(源)绘制在另一个物体(目标)之上,那么浏览器就会简单地把源特体的图像叠放在目标物体图像上面。

Canvas globalCompositeOperation

简单点讲,在Canvas中,把图像源和目标图像,通过Canvas中的 globalCompositeOperation 操作,可以得到不同的效果,比如下图:

Canvas globalCompositeOperation

正如上图,红苹果和黑色的圆,通过 globalCompositeOperationdestination-out 就变成了被咬了一口的红苹果。也就是说,在Canvas中通过图像的合成,我们可以实现一些与众不同的效果,比如我们要制作一个刮刮卡抽奖的效果。 今天我们就来了解Canvas中的图像合成怎么使用。

图像合成 globalCompositeOperation 类型

在Canvas中 globalCompositeOperation 属性的值总共有 26 种类型,每种类型都将前生不一样的效果,当然你可能看到效果都将不样,甚至有一些效果在浏览器中并不能正常的渲染。不过不要紧,我们简单的了解这26种类型其代表的含意以及产生的效果。

ctx.save(); 
ctx.translate(w / 2, h / 2);
ctx.fillStyle = 'red'; 
ctx.beginPath(); 
ctx.arc(-40, 20, 80, 0, Math.PI * 2, true); 
ctx.closePath(); 
ctx.fill();

上面的代码将在Canvas画布上绘制一个半径为 80px 的红色圆形,在这里把它称为图像源。

ctx.fillStyle = 'orange'; 
 ctx.beginPath();
 ctx.arc(40, 20, 80, 0, Math.PI * 2, true); 
 ctx.closePath(); 
 ctx.fill();
 ctx.restore();

这段代码将在Canvas画布上绘制一个半径为 80px 的橙色圆形,在这里把它称为图像目标。在图像源和目标图像之间设置 globalCompositeOperation 的值,就可以完成图像的合成操作:

ctx.save(); 
ctx.translate(w / 2, h / 2); 
ctx.fillStyle = 'red'; 
ctx.beginPath(); 
ctx.arc(-40, 20, 80, 0, Math.PI * 2, true); 
ctx.closePath(); 
ctx.fill(); 
ctx.globalCompositeOperation = 'source-in'; 
ctx.fillStyle = 'orange'; 
ctx.beginPath(); 
ctx.arc(40, 20, 80, 0, Math.PI * 2, true); 
ctx.closePath(); 
ctx.fill(); 
ctx.restore();

此时得到的效果如下:

Canvas globalCompositeOperation

source-over

source-overglobalCompositeOperation 属性的默认值。源图形覆盖目标图形,源图形不透明的地方显示源图形,其余显示目标图形

Canvas globalCompositeOperation

source-in

source-in :目标图形和源图形重叠且都不透明的部分才被绘制

Canvas globalCompositeOperation

source-out

source-out :目标图形和源图形不重叠的部分会被绘制

Canvas globalCompositeOperation

source-atop

source-atop :目标图形和源图形内容重叠的部分的目标图形会被绘制

Canvas globalCompositeOperation

destination-over

destination-over :目标图形和源图形内容后面的目标图形会被绘制

Canvas globalCompositeOperation

destination-in

destination-in :目标图形和源图形重叠的部分会被保留(源图形),其余显示为透明

Canvas globalCompositeOperation

其它的就不一一展示了。具体每个值对应的描述,可以点击这里查阅 。

结合globalAlpha控制图像合成操作

在Canvas中有两个属性 globalAlphaglobalCompositeOperation 来控制图像合成操作:

  • globalAlpha :设置图像的透明度。 globalAlpha 属性默认值为 1 ,表示完全不透明,并且可以设置从 0 (完全透明)到 1 (完全不透明)。这个值必须设置在图形绘制之前
  • globalCompositeOperation :该属性的值在 globalAlpha 以及所有变换都生效后控制在当前Canvas位图中绘制图形

合成图像的应用示例

在平时的业务中,我们常常能看到刮刮卡这样的抽奖效果。如果我们使用Canvas来做,就会用到Canvas图像的合成。

<div id="card"> 
<canvas id="canvasOne" width="500" height="300"></canvas> </div>

我们把奖品(如果是一个图像)当作 div#card 的背景展示。然后在Canvas中先绘制一个灰色的矩形(源图像),再通过鼠标事件(或触摸事件)来动态绘制新图像(这个就类似笔刷),把 globalCompositeOperation 属性的值设置为 destination-out (新绘制的图形和目标canvas中已经存在的图形内容不重叠的部分的会被保留)。当笔刷擦除大于一定的比例的时候,就删除 <canvas> 元素或者使用 clearRect() 清除Canvas画布。从而展示出 div 背景

这篇文章我们主要介绍了Canvas的图像合成,在Canvas中可以通过两个属性globalAlpha和globalCompositeOperation来控制图像合成操作,实现图像合成效果。希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3实现类似翻书效果的过渡动画的示例代码
Sep 06 HTML / CSS
css3实现的下拉菜单效果示例
Jan 22 HTML / CSS
html5+css3气泡组件的实现
Nov 21 HTML / CSS
CSS3中的transform属性进行2D和3D变换的基本用法
May 12 HTML / CSS
css3的动画特效之动画序列(animation)
Dec 22 HTML / CSS
css3 仿写阿里云水纹效果的示例代码
Feb 10 HTML / CSS
CSS3 border-radius圆角的实现方法及用法详解
Sep 14 HTML / CSS
HTML5 Canvas draw方法制作动画效果示例
Jul 11 HTML / CSS
HTML5 在canvas中绘制文本附效果图
Jun 23 HTML / CSS
HTML5单页面手势滑屏切换原理分析
Jul 10 HTML / CSS
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
Mar 18 HTML / CSS
html粘性页脚的具体使用
Jan 18 HTML / CSS
深入理解HTML5定时器requestAnimationFrame的使用
Dec 12 #HTML / CSS
手对手的教你用canvas画一个简单的海报的方法示例
Dec 10 #HTML / CSS
html5+css如何实现中间大两头小的轮播效果
Dec 06 #HTML / CSS
Html5 Canvas动画基础碰撞检测的实现
Dec 06 #HTML / CSS
canvas压缩图片以及卡片制作的方法示例
Dec 04 #HTML / CSS
canvas探照灯效果的示例代码
Nov 30 #HTML / CSS
localStorage的过期时间设置的方法详解
Nov 26 #HTML / CSS
You might like
基于session_unset与session_destroy的区别详解
2013/06/03 PHP
php curl选项列表(超详细)
2013/07/01 PHP
php中time()和mktime()方法的区别
2013/09/28 PHP
PHP基于curl后台远程登录正方教务系统的方法
2016/10/14 PHP
PHP输出XML格式数据的方法总结
2017/02/08 PHP
javascript 获取图片颜色
2009/04/05 Javascript
基于jquery的bankInput银行卡账号格式化
2012/08/22 Javascript
十个迅速提升JQuery性能让你的JQuery跑得更快
2012/12/10 Javascript
jquery $(this).attr $(this).val方法使用介绍
2013/10/08 Javascript
javascript截取字符串小结
2015/04/28 Javascript
基于JavaScript实现智能右键菜单
2016/03/02 Javascript
JS未跨域操作iframe里的DOM
2016/06/01 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
2016/10/31 Javascript
原生js实现可拖拽效果
2017/02/28 Javascript
微信小程序 动态绑定数据及动态事件处理
2017/03/14 Javascript
微信小程序页面开发注意事项整理
2017/05/18 Javascript
基于IView中on-change属性的使用详解
2018/03/15 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
2018/09/04 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
2019/05/28 jQuery
JS实现简单的文字无缝上下滚动功能示例
2019/06/22 Javascript
python中查找excel某一列的重复数据 剔除之后打印
2013/02/10 Python
python求解水仙花数的方法
2015/05/11 Python
python妙用之编码的转换详解
2017/04/21 Python
Python 查看文件的读写权限方法
2018/01/23 Python
我用Python抓取了7000 多本电子书案例详解
2019/03/25 Python
在pycharm中创建django项目的示例代码
2020/05/28 Python
tensorflow/core/platform/cpu_feature_guard.cc:140] Your CPU supports instructions that this T
2020/06/22 Python
Python用来做Web开发的优势有哪些
2020/08/05 Python
html table呈现个人简历以及单元格宽度失效的问题解决
2021/01/22 HTML / CSS
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
美国孩之宝玩具官网:Hasbro Pulse
2019/06/24 全球购物
美体小铺波兰官方网站:The Body Shop波兰
2019/09/03 全球购物
委托书的格式
2014/08/01 职场文书
个人工作年终总结
2015/03/09 职场文书
Python制作一个随机抽奖小工具的实现
2021/07/07 Python
SQL语句多表联合查询的方法示例
2022/04/18 MySQL