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动画过渡实现鼠标跟随导航效果
Feb 08 HTML / CSS
CSS3中的5个有趣的新技术
Apr 02 HTML / CSS
CSS3之多背景background使用示例
Oct 18 HTML / CSS
CSS3感应鼠标的背景闪烁和图片缩放动画效果
May 14 HTML / CSS
CSS3实现闪烁动画效果的方法
Feb 09 HTML / CSS
移动端Web页面的CSS3 flex布局快速上手指南
May 31 HTML / CSS
利用纯CSS3实现动态的自行车特效源码
Jan 20 HTML / CSS
Android本地应用打开方法——通过html5写连接
Mar 11 HTML / CSS
HTML5实践-图片设置成灰度图
Nov 12 HTML / CSS
HTML5 localStorage使用总结
Feb 22 HTML / CSS
HTML5自定义元素播放焦点图动画的实现
Sep 25 HTML / CSS
amazeui模态框弹出后立马消失并刷新页面
Aug 19 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
Linux fgetcsv取得的数组元素为空字符串的解决方法
2011/11/25 PHP
php牛逼的面试题分享
2013/01/18 PHP
php二分查找二种实现示例
2014/03/12 PHP
php无法连接mysql数据库的正确解决方法
2016/07/01 PHP
用javascript模仿ie的自动完成类似自动完成功的表单
2012/12/12 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
2013/05/21 Javascript
setInterval与clearInterval的使用示例代码
2014/01/28 Javascript
JS实现div居中示例
2014/04/17 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
2015/02/27 Javascript
JavaScript实现向右伸出的多级网页菜单效果
2015/08/25 Javascript
js类式继承与原型式继承详解
2016/04/07 Javascript
JS原型对象的创建方法详解
2016/06/16 Javascript
JS实现的几个常用算法
2016/11/12 Javascript
JavaScript正则替换HTML标签功能示例
2017/03/02 Javascript
详解angular ui-grid之过滤器设置
2017/06/07 Javascript
详解Vue快速零配置的打包工具——parcel
2018/01/16 Javascript
js for终止循环 跳出多层循环
2018/10/04 Javascript
js中对象和面向对象与Json介绍
2019/01/21 Javascript
JavaScript实现商品评价五星好评
2020/11/30 Javascript
一起深入理解js中的事件对象
2021/02/06 Javascript
python动态性强类型用法实例
2015/05/09 Python
详解Python字符串对象的实现
2015/12/24 Python
详解Numpy数组转置的三种方法T、transpose、swapaxes
2019/05/27 Python
python openpyxl使用方法详解
2019/07/18 Python
python通过robert、sobel、Laplace算子实现图像边缘提取详解
2019/08/21 Python
python+opencv实现车牌定位功能(实例代码)
2019/12/24 Python
Keras中的两种模型:Sequential和Model用法
2020/06/27 Python
python 抓取知乎指定回答下视频的方法
2020/07/09 Python
pycharm 多行批量缩进和反向缩进快捷键介绍
2021/01/15 Python
美国内衣品牌:Leonisa
2016/08/14 全球购物
美国受欢迎的眼影品牌:BH Cosmetics
2016/10/25 全球购物
大三在校生电子商务求职信
2013/10/29 职场文书
青春奉献演讲稿
2014/05/08 职场文书
python 机器学习的标准化、归一化、正则化、离散化和白化
2021/04/16 Python
深入浅析Redis 集群伸缩原理
2021/05/15 Redis
Java后端 Dubbo retries 超时重试机制的解决方案
2022/04/14 Java/Android