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 15 HTML / CSS
CSS3制作文字半透明倒影效果的两种实现方式
Aug 08 HTML / CSS
使用CSS3设计地图上的雷达定位提示效果
Apr 05 HTML / CSS
css3的过滤效果简单实例
Aug 03 HTML / CSS
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
Nov 22 HTML / CSS
HTML5实现自带进度条和滑块滑杆效果
Apr 17 HTML / CSS
Html5 canvas实现粒子时钟的示例代码
Sep 06 HTML / CSS
详解Canvas实用库Fabric.js使用手册
Jan 07 HTML / CSS
HTML5 video进入全屏和退出全屏的实现方法
Jul 28 HTML / CSS
利用Node实现HTML5离线存储的方法
Oct 16 HTML / CSS
css animation配合SVG制作能量流动效果
Mar 24 HTML / CSS
html+css实现滚动到元素位置显示加载动画效果
Aug 02 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取整数函数常用的四种方法小结
2012/07/05 PHP
浅析PHP中Collection 类的设计
2013/06/21 PHP
解决CodeIgniter伪静态失效
2014/06/09 PHP
PHP+HTML+JavaScript+Css实现简单爬虫开发
2016/03/28 PHP
js资料toString 方法
2007/03/13 Javascript
传智播客学习之java 反射
2009/11/22 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
2012/01/13 Javascript
jQuery照片伸缩效果不影响其他元素的布局
2014/05/09 Javascript
javascript时间函数大全
2014/06/30 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
2015/11/04 Javascript
JS及PHP代码编写八大排序算法
2016/07/12 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
2020/04/23 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
2016/09/14 Javascript
jQuery动态产生select option下拉列表
2017/03/15 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
2017/09/07 jQuery
用jquery获取select标签中选中的option值及文本的示例
2018/01/25 jQuery
Vue-Cli 3.0 中配置高德地图的两种方式
2019/06/19 Javascript
javascript实现抢购倒计时程序
2019/08/26 Javascript
phpsir 开发 一个检测百度关键字网站排名的python 程序
2009/09/17 Python
python重试装饰器示例
2014/02/11 Python
python解析中国天气网的天气数据
2014/03/21 Python
Linux下使用python调用top命令获得CPU利用率
2015/03/10 Python
简单的连接MySQL与Python的Bottle框架的方法
2015/04/30 Python
python 读取dicom文件,生成info.txt和raw文件的方法
2019/01/24 Python
python多线程共享变量的使用和效率方法
2019/07/16 Python
opencv+python实现鼠标点击图像,输出该点的RGB和HSV值
2020/06/02 Python
CSS3 clip-path 用法介绍详解
2018/03/01 HTML / CSS
美国女性服饰销售网站:Nasty Gal(坏女孩)
2016/07/26 全球购物
Brother加拿大官网:打印机、贴标机、缝纫机
2019/10/09 全球购物
党校自我鉴定范文
2013/10/02 职场文书
捐赠仪式主持词
2014/03/19 职场文书
专题组织生活会发言材料
2014/10/17 职场文书
写给纪委的违纪检讨书
2015/05/05 职场文书
担保书格式范文
2015/09/22 职场文书
Python socket如何解析HTTP请求内容
2022/02/12 Python
springboot读取nacos配置文件
2022/05/20 Java/Android