html5中让图片重叠在一起,HTML5 Canvas图形叠加(合成)

本文介绍的组合其实就是两个或以上的图形绘制在一起(或“合成”)时所产生的效果。默认的情况是，最后绘制的图形覆盖先前绘制的图形。

在Canvas中有12个组合类型，这些类型用属性globalCompositeOperation来设置，下面给出了所有值在Canvas上的含义说明。

globalCompositeOperation属性值及其含义

"copy" 只绘制新图形，删除其他所有内容

"darker" 图形重叠的地方的颜色由两个颜色值相减后的值决定

"destination-atop" 已有的内容只有在它和新图形重叠的地方保留。新图形绘制于内容之后。和"source-atop"一样

"destination-in" 在新图形以及已有画布重叠的地方，已有内容都保留，所有其他内容成为透明的。和"source-in"一样

"destination-out" 在已有内容和新图形不重叠的地方，已有内容保留，所有其他内容成为透明。和"source-out"一样

"destination-over" 新图形绘制于已有内容的后面。和"source-over"一样

"lighter" 图形重叠的地方的颜色由两种颜色值相加后的值来决定

"source-atop" 只有在新图形和已有内容重叠的地方，才绘制新图形

"source-in" 在新图形以及已有内容重叠的地方，才绘制新图形，所有其他内容成为透明的

"source-out" 只有在与已有图形不重叠的地方，才绘制新图形

"source-over" 新图形绘制于已有图形的顶部，这是默认的行为

"xor" 在重叠和正常绘制的其他地方，图形都成为透明的

本文中出现的"source"指的是将要绘制到画布上的颜色，而"destination"指的是画布上已经存在的颜色。globalCompositeOperation的默认值是

"source-over"。

参考代码如下：

ctx.fillStyle = 'red';

ctx.fillRect(0, 0, 40, 20);

ctx.globalCompositeOperation="destination-out"

//此处的类型值更换后将出现不同的情况，读者可以自行尝试

ctx.fillStyle = 'blue';

ctx.fillRect(8,7, 20, 20);

html5中让图片重叠在一起,HTML5 Canvas图形叠加(合成)相关推荐

html5怎么设置表单居中显示图片,如何将html5中的图片设置居中？图片居中的代码！...
在各种形形色色的网页中少不了的就是图片了,在使用和浏览的时候我们看到都是文字的话肯定是不好受的,那么这次就来说说如何将html5中的图片设置居中,下面是小编分享的一些有关于在 html5 中图片如何居 ...
设计图片转换html5,在HTML5中翻转图片
貌似 HTML5 的 Canvas 只提供了图片的旋转.缩放功能,没有提供图片翻转(水平翻转或垂直翻转)的支持,搜索加试验之后,得到几种实现图片翻转的方法,记录一下. 第一种最简单的是使用 CSS,代 ...
html5中的图片的location,HTML5中的History和Location对象
今天发现原来HTML5对History和Location对象进行了改进,提供了几个新的API.我觉得,这用来结合Ajax来使用,弥补Ajax技术更新内容但不产生历史记录的问题,十分有用. 我很久之前就 ...
html5中的css特性,浅谈HTML5 CSS3的新交互特性
本文标题的这副图片,是用phosotshop制作的.但是,在搜索引擎中你却无法搜索到它,搜索引擎还没有强大到能够识别图片里面的文字.并且由于图片的体积不算太小,可能网速慢的网友在浏览的时候不得不耐心的 ...
HTML5中新增的音频标签是,HTML5新增的音频标签、视频标签
我们所说的H5就是我们所说的HTML5中新增的语言标准一.音频标签在HTML5当中有一个叫做audio的标签,可以直接引入一段音频资源放到我们的网页当中格式: 降级的文字说明(当音频文件不能本浏 ...
HTML5中拖动功能的添加属性,html5中可拖动dragable属性及其他成员的讲解
html5中可拖动dragable属性及其他成员的讲解发布时间:2020-04-22 11:08:02 来源:亿速云阅读:350 作者:小新这篇文章主要为大家详细介绍了html5中可拖动drag ...
html5中ol的意思,详解HTML5中ol标签的用法
定义和用法标签定义有序列表. HTML 4.01 与 HTML 5 之间的差异在 HTML 4.01 中,不赞成使用 "start" 属性,在 HTML 5 中是允许的. 在 ...
浅析HTML5中标签del和ins以及HTML5中被舍弃的标签
浅析HTML5中标签del和ins 在HTML中,一般购物网站的开发中会多次重复用到删除标签和下划线标签,若要实现删除线效果,可爱的程序员们起初都会选择用标签,实现文字下划线呢,也会自然而然的想到用标 ...
html5中怎么设置音频的位置,HTML5中音频的详细解析
摘要腾兴网为您分享:HTML5中音频的详细解析,智慧医疗,榛果民宿,猿辅导,优酷等软件知识,以及虚拟视频,天正建筑tarch8.5,跟谁学登录,照片回收站,医学生简历模板,重复文件删除,卡农社区,招 ...

html5中让图片重叠在一起,HTML5 Canvas图形叠加(合成)

html5中让图片重叠在一起,HTML5 Canvas图形叠加(合成)相关推荐

最新文章

热门文章