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等相关属性制作分页导航实现代码
Dec 24 HTML / CSS
使用css3制作登录表单的步骤
Apr 07 HTML / CSS
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
Dec 30 HTML / CSS
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
Mar 02 HTML / CSS
举例详解HTML5中使用JSON格式提交表单
Jun 16 HTML / CSS
HTML5自定义元素播放焦点图动画的实现
Sep 25 HTML / CSS
amazeui页面分析之登录页面的示例代码
Aug 25 HTML / CSS
萌新HTML5 入门指南(二)
Nov 09 HTML / CSS
ivx平台开发之不用代码实现一个九宫格抽奖功能
Jan 27 HTML / CSS
html5使用window.postMessage进行跨域实现数据交互的一次实战
Feb 24 HTML / CSS
CSS实现五种常用的2D转换
Dec 06 HTML / CSS
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
Apr 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
php MessagePack介绍
2013/10/06 PHP
PHP中提问频率最高的11个面试题和答案
2014/09/02 PHP
php实现获取农历(阴历)、节日、节气的类与用法示例
2017/11/20 PHP
php实现的支付宝网页支付功能示例【基于TP5框架】
2019/09/16 PHP
jquery 插件 人性化的消息显示
2008/01/21 Javascript
js实现拖拽 闭包函数详细介绍
2012/11/25 Javascript
JavaScript中的eval()函数详解
2013/08/22 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
2013/10/20 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
2015/03/05 Javascript
js实现左侧网页tab滑动门效果代码
2015/09/06 Javascript
浅析JavaScript 调试方法和技巧
2015/10/22 Javascript
Highcharts入门之基本属性
2016/08/02 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
2017/08/07 Javascript
Vue动态组件实例解析
2017/08/20 Javascript
Vue项目中使用jquery的简单方法
2019/05/16 jQuery
VUE前后端学习tab写法实例
2019/08/06 Javascript
解决在Vue中使用axios用form表单出现的问题
2019/10/30 Javascript
[01:16]2014DOTA2 TI专访C9战队EE:中国五强中会占三席
2014/07/10 DOTA
Python实现测试磁盘性能的方法
2015/03/12 Python
python 调用win32pai 操作cmd的方法
2017/05/28 Python
python编写微信远程控制电脑的程序
2018/01/05 Python
使用Python制作微信跳一跳辅助
2018/01/31 Python
Python回文字符串及回文数字判定功能示例
2018/03/20 Python
解决python3 json数据包含中文的读写问题
2018/05/10 Python
Python中extend和append的区别讲解
2019/01/24 Python
Python3调用百度AI识别图片中的文字功能示例【测试可用】
2019/03/13 Python
Django保护敏感信息的方法示例
2019/05/09 Python
python2 对excel表格操作完整示例
2020/02/23 Python
Python Django view 两种return的实现方式
2020/03/16 Python
Python文件操作基础流程解析
2020/03/19 Python
美国最大的家庭鞋类零售商之一:Shoe Carnival
2017/10/06 全球购物
Rosetta Stone官方网站:语言学习
2019/01/05 全球购物
军校制空专业毕业生自我鉴定
2013/11/16 职场文书
机修工岗位职责
2013/11/24 职场文书
MySQL基于索引的压力测试的实现
2021/11/07 MySQL
Pygame Event事件模块的详细示例
2021/11/17 Python