HTML5中canvas画布属性,html5 Canvas之画布合成的属性总结

首先解释一下合成的含义，合成是指如何精细控制画布上面的对象的透明度和分层效果。其中控制Canvas画布合成的操作的两个属性分别是：globalAlpha和globalCompositeOperation

一、globalAlpha：这个属性的默认值是1.0(完全不透明)，并且可以设置从0.0(完全透明)到1.0的值，需要注意的是，这个属性必须在图形绘制之前设置

二、globalCompositeOperation：这个属性的值在globalAlpha以及所有变换都生效后控制在当前Canvas位图中绘制图形。它有多个值，下面一一做解释，在下面讲到的“A”是指要绘制在画布上的形状，“B”是指显示在画布上的位图

1、Copy：二者重叠，显示A而不显示B

2、destination-atop：B位于A上，二者重叠且都不透明的地方显示B,A不透明而B透明的地方显示A,其余显示透明

3、destination-in：B在A内，二者都不透明的地方显示B，其余显示透明

4、destination-out：B在A外，B不透明而A透明的地方显示B，其余显示透明

5、destination-over：B覆盖A，B不透明的地方显示B，其余显示A

6、lighter：A加B,显示A和B之和，色值接近1.0

7、source-atop：A在B之上，二者重叠且都不透明的地方显示A，B不透明而A透明的地方显示B，其余显示透明

8、source-in：A在B内，二者都不透明的地方显示A，其余显示透明

9、source-over：(默认值)A覆盖B,A不透明的地方显示A，其余显示B

10、source-out：A在B外，A不透明的地方而B透明的地方显示A，其余显示透明

11、xor：这个只能意会不能言传，自己赋值看效果就可以了。

使用方法如下所示：

上面代码在浏览器中的预览效果如下：

在这里小编给一个小编做程序多年的经验：

1、context.globalCompositeOperation = "destinationatop";这种写法在浏览器中是不能正常使用的

2、如果要变换新绘制的形状，必须用到Canvas函数中的save()和restore()两个函数

save() 保存当前状态到堆栈

restore() 调出最后储存的堆栈恢复画布

3、globalAlpha属性只影响设置之后的形状

HTML5中canvas画布属性,html5 Canvas之画布合成的属性总结相关推荐

html5中api有什么,HTML5中的API概览
HTML5中的API概览整理一下HTML5中的常见API. 前言 HTML5中提供了一些功能强大的API,在不考虑兼容性的情况下,比起原生js实现更加简单,比起jQuery可以少引入包,这里整理几个 ...
html5中加入视频格式,HTML5音视频格式video和audio
html5音频和视频使用详解. 一.html5视频以前,大多数视频是通过插件(比如 Flash)来显示的,然而,并非所有浏览器都拥有同样的插件现在,HTML5 规定了一种通过 video 元素来包 ...
HTML5中如何显示视频HTML5视频播放
HTML5 规定了一种通过 video 元素来包含视频的标准方法. 在HTML5中,video元素目前支持三种格式的视频文件, 1.Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 ...
html5中figure怎么用,HTML5中figure和figcaption标签用法
HTML5中figure和figcaption标签一般都是配套使用的,先了解下两者的基本定义,然后结合实例来说明两者的用法. 标签规定独立的流内容(图像.图表.照片.代码等等). figure元素的内 ...
html5中移动旋转缩放,HTML5 Canvas进阶（一）：渐变，透明，移动，旋转，缩放
前一篇博文介绍了在标签中绘制图形的一些基本方法,本文将进一步介绍如何在标签中对图形图像进行操纵. 渐变 Context对象可以通过createLinearGradient()和createRadial ...
html5中 save方法,如何HTML5画布另存为窗口8 Metro应用中的图像文件？(How to save html5 c...
var myImage = canvas.toDataURL("image/png"); 我认为myImage在现在png格式如何保存编码的图像字节myImage作为一个文件(图片 ...
HTML5中volume样式自定义,html5中关于volume属性的使用详解
Audio对象属性: volume 描述:设置或返回音频的音量,取值范围(0--1) 下面是我做的音乐播放器如何调节音频音量的代码://增加切换音量事件 (function(){ var height ...
html5中加入音频,使用HTML5在网页中嵌入音频和视频播放的基本方法
HTML5 特性,包括原生音频和视频支持而无需 Flash. HTML5 和标签让我们给站点添加媒体变得简单.我们只需要设置 src 属性来识别媒体资源,包含 controls 属性让用户可以播放和 ...
在html5中怎么设置背景音乐,HTML5简单实现添加背景音乐的几种方法
这里推荐两种方法,就是两个标签或者常用 +css布局隐藏播放器做网站比较实用! html5添加音乐说明: 1.src毫无疑问写路径. 2.使用hidden="true"表 ...
html5中的td tr,html5 表格标签 table tr td
最重要的三个属性: boarder 边框粗细 style 可配合css 使用行标签 table row 有表就可以建行单元格标签 table data 有行就可以建数据 ...

HTML5中canvas画布属性,html5 Canvas之画布合成的属性总结

HTML5中canvas画布属性,html5 Canvas之画布合成的属性总结相关推荐

最新文章

热门文章