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实现多背景展示效果通过CSS3定位多张背景
Aug 10 HTML / CSS
html5+css3之CSS中的布局与Header的实现
Nov 21 HTML / CSS
css3的过滤效果简单实例
Aug 03 HTML / CSS
CSS3模拟IOS滑动开关效果
Sep 28 HTML / CSS
CSS3 实现弹跳的小球动画
Oct 26 HTML / CSS
HTML5 Canvas自定义圆角矩形与虚线示例代码
Aug 02 HTML / CSS
html5教程画矩形代码分享
Dec 04 HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
Mar 21 HTML / CSS
HTML5基于flash实现播放RTMP协议视频的示例代码
Dec 04 HTML / CSS
用CSS3画一个爱心
Apr 27 HTML / CSS
html form表单基础入门案例讲解
Jul 21 HTML / CSS
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
Dec 24 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
Windows2003 下 MySQL 数据库每天自动备份
2006/12/21 PHP
检测png图片是否完整的php代码
2010/09/06 PHP
ThinkPHP3.2.3框架实现执行原生SQL语句的方法示例
2019/04/03 PHP
CL vs ForZe BO5 第一场 2.13
2021/03/10 DOTA
javascript编程起步(第四课)
2007/01/10 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
2014/09/01 Javascript
jquery插件validation实现验证身份证号等
2015/06/04 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
2016/01/22 Javascript
jquery对象和DOM对象的任意相互转换
2016/02/21 Javascript
js传值后台中文出现乱码的解决方法
2016/06/30 Javascript
AngularJS指令详解及示例代码
2016/08/16 Javascript
jQuery自定义组件(导入组件)
2016/11/08 Javascript
使用JavaScript获取URL中的参数(两种方法)
2016/11/16 Javascript
Vue.js双向绑定实现原理详解
2016/12/22 Javascript
利用jquery实现实时更新歌词的方法
2017/01/06 Javascript
angular学习之ngRoute路由机制
2017/04/12 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
2017/09/19 Javascript
JS运动特效之任意值添加运动的方法分析
2018/01/24 Javascript
Ant Design Pro 下实现文件下载的实现代码
2019/12/03 Javascript
python在windows下实现ping操作并接收返回信息的方法
2015/03/20 Python
PyTorch CNN实战之MNIST手写数字识别示例
2018/05/29 Python
python K近邻算法的kd树实现
2018/09/06 Python
Python使用windows设置定时执行脚本
2020/11/12 Python
python 制作网站筛选工具(附源码)
2021/01/21 Python
纯CSS3实现手风琴风格菜单具体步骤
2013/05/06 HTML / CSS
皇家道尔顿官网:Royal Doulton
2017/12/06 全球购物
临床医师个人自我评价
2014/04/06 职场文书
中学生操行评语大全
2014/04/24 职场文书
药品营销专业毕业生自荐信
2014/07/02 职场文书
乡文化站暑期培训方案
2014/08/28 职场文书
关于成绩下滑的自我检讨书
2014/09/20 职场文书
银行实习推荐信
2015/03/27 职场文书
七年级作文之秋游
2019/10/21 职场文书
php 获取音视频时长,PHP 利用getid3 获取音频文件时长等数据
2021/04/01 PHP
Python如何导出导入所有依赖包详解
2021/06/08 Python
Win11怎么解除儿童账号限制?Win11解除微软儿童账号限制方法
2022/07/07 数码科技