Canvas学习:globalCompositeOperation详解
在默认情况之下,如果在Canvas之中将某个物体(源)绘制在另一个物体(目标)之上,那么浏览器就会简单地把源特体的图像叠放在目标物体图像上面。
简单点讲,在Canvas中,把图像源和目标图像,通过Canvas中的globalCompositeOperation
操作,可以得到不同的效果,比如下图:
正如上图,红苹果和黑色的圆,通过globalCompositeOperation
的destination-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();
此时得到的效果如下:
source-over
source-over
是globalCompositeOperation
属性的默认值。源图形覆盖目标图形,源图形不透明的地方显示源图形,其余显示目标图形
source-in
source-in
:目标图形和源图形重叠且都不透明的部分才被绘制
source-out
source-out
:目标图形和源图形不重叠的部分会被绘制
source-atop
source-atop
:目标图形和源图形内容重叠的部分的目标图形会被绘制
destination-over
destination-over
:目标图形和源图形内容后面的目标图形会被绘制
destination-in
destination-in
:目标图形和源图形重叠的部分会被保留(源图形),其余显示为透明
其它的就不一一展示了。具体每个值对应的描述,可以点击这里查阅。
具体效果可以看下面的实现效果:
结合globalAlpha控制图像合成操作
在Canvas中有两个属性globalAlpha
和globalCompositeOperation
来控制图像合成操作:
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画布。
这里的实现方式是:
使用 canvas 的 getImageData 方法,来获取 canvas 上的像素信息,这个方法返回的对象的 data 属性是一个一维数组,包含以 RGBA 顺序的数据,数据使用 0 至 255(包含)的整数表示,详细的可以看看 canvas 的像素操作。
用这个方法来判断有多少已经擦除掉了,也就是通过一个变量来记录有多少像素的RGBA的值是0,当变量的值超过某一个值时,就清除全部灰色。
效果代码:
水滴扩散
实现思路
在一个 canvas 上先画出黑白色的图片,然后设置背景是一张彩色的图片,鼠标点击时,设置 canvas 的 globalCompositeOperation 属性值为 destination-out,根据鼠标在 canvas 中的 坐标,用一个不规则的图形逐渐增大,来擦除掉黑白色的图片,就可以慢慢显示彩色的背景了。
也就是说我们需要三张图片
黑白的图片
彩色的图片
不规则形状的图片
实现效果:
探照灯
实现思路:
同样我们设置canvas的背景为一张被掩盖的图片,每次绘制在canvas上填充黑色背景,将globalCompositeOperation设置为destination-out,下面绘制灯光即圆,为了让灯光逼真,我们使用了径向渐变颜色填充圆。
注意点
globalCompositeOperation起作用的不只是前一个绘制内容,是指已经存在的所有绘制过的路径内容,所以用的时候要小心之前绘制的内容是否需要产生影响。
透明度的影响上面已经涉及到 globalAlpha,如果之前绘制路径填充或者描边使用到了透明度或者之前绘制的是张图片,图片本身有透明度的效果,那globalCompositeOperation都会受影响
总结
在这篇文章中我们主要介绍了Canvas的图像合成,在Canvas中可以通过两个属性globalAlpha
和globalCompositeOperation
来控制图像合成操作,实现图像合成效果。
著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: https://www.w3cplus.com/canvas/compositing.html © w3cplus.com
Canvas学习:globalCompositeOperation详解的更多相关文章
- canvas绘图API详解
canvas绘图API详解 1.context的状态 矩阵变换属性 当前剪辑区域 context的其他状态属性: strokeStyle, fillStyle, globalAlpha, lineWi ...
- iPhone应用开发 UITableView学习点滴详解
iPhone应用开发 UITableView学习点滴详解是本文要介绍的内容,内容不多,主要是以代码实现UITableView的学习点滴,我们来看内容. -.建立 UITableView DataTab ...
- canvas arcTo()用法详解 – CodePlayer
canvas arcTo()用法详解 – CodePlayer canvas arcTo()用法详解
- Android中Canvas绘图基础详解(附源码下载) (转)
Android中Canvas绘图基础详解(附源码下载) 原文链接 http://blog.csdn.net/iispring/article/details/49770651 AndroidCa ...
- Eclipse IDE for C/C++ Developers和MinGW安装配置C/C++开发学习环境详解
Eclipse IDE for C/C++ Developers和MinGW安装配置C/C++开发学习环境详解 操作系统:Windows 7 JDK版本:1.6.0_33 Eclipse版本:Juno ...
- 第157天:canvas基础知识详解
目录 一.canvas简介 1.1 什么是canvas?(了解) 1.2 canvas主要应用的领域(了解) 二.canvas绘图基础 2.0 sublime配置canvas插件(推荐) 2.1 Ca ...
- 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理
[微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...
- canvas绘制线条详解
canvas详解----绘制线条 <!DOCTYPE html> <html> <head> <title>canvas详解</title> ...
- css学习--inline-block详解及dispaly:inline inline-block block 三者区别精要概括
*知识储备: 内联元素:是不可以控制宽和高.margin等:并且在同一行显示,不换行. 块级元素:是可以控制宽和高.margin等,并且会换行. 1.inline-block 详解 (1)一句话就是在 ...
随机推荐
- CSS01--概述与选择器
CSS:Cascading Style Sheets,层叠样式表.我们之前已经说过,HTML解决的是网页内容(结构)的问题,而CSS立足于网页的表现方面的问题,则样式定义如何显示HTML标签,js负责 ...
- 1.由于测试某个功能,需要生成500W条数据的txt,python代码如下
txt内容是手机号,数量500W,采用python代码生成,用时60S,本人技能有限,看官如果有更快的写法,欢迎留言交流. import random f = open("D:\\data. ...
- 100道C#面试题(.net开发人员必备)
1. .NET和C#有什么区别 答:.NET一般指 .NET FrameWork框架,它是一种平台,一种技术. C#是一种编程语言,可以基于.NET平台的应用. 2.一列数的规则如下: 1.1.2.3 ...
- WCF系列教程之WCF服务配置
文本参考自:http://www.cnblogs.com/wangweimutou/p/4365260.html 简介:WCF作为分布式开发的基础框架,在定义服务以及消费服务的客户端时可以通过配置文件 ...
- python四种简单排序
#!/usr/bin/python #排序方法 #冒泡排序 def buble(l): for i in range(len(l)): for j in range(len(l)-i-1): if l ...
- https证书pfx 生成 pem,crt,key
(1)将.pfx格式的证书转换为.pem文件格式: openssl pkcs12 -in xxx.pfx -nodes -out server.pem (2)从.pem文件中导出私钥server ...
- Java的访问权限(public并不等于默认)
一共有四种访问权限,对应四个范围 1.private :只有本类内可以使用,即使是子类也没权使用 2.protect :子类和友好类能够使用,继承中经常用到 3.默认值,(就是什么都没写),只有同包名 ...
- Java接口的简单理解和总结
1.抽象层次:普通类 -> 抽象类 -> 接口 普通类:就是我们常用的类: 抽象类:专门用来被子类继承的,主要是为了符合现实世界的规律 如: Animal类:(每个现实的对象都有类与它相对 ...
- getSqlMapClientTemplate().insert()方法的返回值问题
insert方法的返回值 今天碰到一个问题,就是关于ibatis的insert方法的返回值的问题.在网上找了很多例子,自己也亲自试了一下. 最后得出结论:insert方法返回的是在表中插入记录 ...
- eclipse修改默认注释
(来源:https://www.cnblogs.com/yangjian-java/p/6674772.html) 一.背景简介 丰富的注释和良好的代码规范,对于代码的阅读性和可维护性起着至关重要的作 ...