我们总是将一个图形画在另一个之上,大多数情况下,这样是不够的。比如说,它这样受制于图形的绘制顺序。不过,我们可以利用 globalCompositeOperation
属性来改变这些做法。
globalCompositeOperation = type
我们不仅可以在已有图形后面再画新图形,还可以用来遮盖,清除(比 clearRect
方法强劲得多)某些区域。
type
是下面 12 种字符串值之一:
注意:下面所有例子中,蓝色方块是先绘制的,即“已有的 canvas 内容”,红色圆形是后面绘制,即“新图形”。
source-over (default)
这是默认设置,新图形会覆盖在原有内容之上。
|
|
destination-over
会在原有内容之下绘制新图形。
|
|
source-in
新图形会仅仅出现与原有内容重叠的部分。其它区域都变成透明的。
|
|
destination-in
原有内容中与新图形重叠的部分会被保留,其它区域都变成透明的。
|
|
source-out
结果是只有新图形中与原有内容不重叠的部分会被绘制出来。
|
|
destination-out
原有内容中与新图形不重叠的部分会被保留。
|
|
source-atop
新图形中与原有内容重叠的部分会被绘制,并覆盖于原有内容之上。
|
|
destination-atop
原有内容中与新内容重叠的部分会被保留,并会在原有内容之下绘制新图形
|
|
lighter
两图形中重叠部分作加色处理。
|
|
darker
两图形中重叠的部分作减色处理。
|
|
xor
重叠的部分会变成透明。
|
|
copy
只有新图形会被保留,其它都被清除掉。
|
|
分享到:
相关推荐
HTML5 canvas 元素的出现填补了这种不足,开发人员可以使用 JavaScript 脚本语言在 canvas 中进行一系列基于命令的图形绘制操作,本文将通过讲解如何使用 canvas 元素进行基本绘图操作,以及完成简单的动画和用户...
《HTML 5 Canvas基础教程》从HTML5和JavaScript(以及jQuery)的基础知识讲起,全面介绍了HTML5Canvas的各种特性,包括渲染上下文、坐标系统、绘制图形、保存和恢复画布状态,以及变形、合成、处理图像和视频等,让...
html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的...
HTML5 CANVAS 绘图 JS 只需要简单的一行代码即可渲染整个绘图版 主要用于实现手写签名
html5 canvas 播放视频html5 canvas 播放视频
资源名称:HTML5 Canvas基础教程内容简介:《HTML5 Canvas基础教程》从HTML5和Javascript(以及jQuery)的基础知识讲起,全面介绍了HTML5 Canvas的各种特性,包括渲染上下文、坐标系统、绘制图形、保存和恢复...
HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas...
html5 canvas实现的绘图工具自由绘制图形画板源码 有很多功能
使用 HTML5 canvas 进行 Web 绘图
html5 canvas 制作流程图 EaselJS html5 canvas 制作流程图 EaselJS
《HTML5 Canvas 开发详解》第二版pdf 版
《HTML5 Canvas核心技术》内的实例代码
html5 canvas绘图板,实现了如下功能: 1、调色(只有固定的几种颜色)、 2、改变笔触粗细、 3、撤销、 4、保存图片到本地、 5、改变画布颜色
http://hi.baidu.com/hjzheng/blog/item/6f5433efcb95b83263d09f4f.html
HTML 5 CANVAS游戏开发实战HTML 5 CANVAS游戏开发实战HTML 5 CANVAS游戏开发实战
html5 canvas绘制七巧板图形代码 html5 canvas绘制七巧板图形代码
高清版 HTML5 CANVAS核心技术图形动画与游戏开发(爱飞翔).pdf
HTML5 canvas仿windows屏保动态管道,设置速度、线条宽度请修改speed与default_width。
HTML5 Canvas核心技术 图形、动画与游戏开发
低版本HTML2canvas 前端开发 生成海报 截图等功能 1.该脚本允许您直接在用户浏览器上对网页或其部分进行“截图”。屏幕截图基于 DOM,因此可能不是 100% 准确到真实表示,因为它不会制作实际的屏幕截图,而是根据...