HTML 5 canvas globalCompositeOperation 属性
本文共 1038 字，大约阅读时间需要 3 分钟。
HTML 5 canvas globalCompositeOperation 属性
定义和用法
globalCompositeOperation 属性设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上。
源图像 = 您打算放置到画布上的绘图。
目标图像 = 您已经放置在画布上的绘图。
| 默认值： | source-over |
|---|---|
| JavaScript 语法： | context.globalCompositeOperation="source-in"; |
属性值
| 值 | 描述 |
|---|---|
| source-over | 默认。在目标图像上显示源图像。 |
| source-atop | 在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。 |
| source-in | 在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。 |
| source-out | 在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。 |
| destination-over | 在源图像上方显示目标图像。 |
| destination-atop | 在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。 |
| destination-in | 在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。 |
| destination-out | 在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。 |
| lighter | 显示源图像 + 目标图像。 |
| copy | 显示源图像。忽略目标图像。 |
| source-over | 使用异或操作对源图像与目标图像进行组合。 |
简单来说,Composite(组合),就是对你在绘图中,后绘制的图形与先绘制的图形之间的组合显示效果,比如在国画中,你先画一笔红色,再来一笔绿色,相交的部分是一种混色,而在油画中,绿色就会覆盖掉相交部分的红色,这在程序绘图中的处理就是Composite,Canvas API中对应的函数就是globalCompositeOperation,跟globalAlpha一样,这个属性是全局的,所以在使用的时候要注意save和restore.
实例
使用不同的 globalCompositeOperation 值绘制矩形。红色矩形是目标图像。蓝色矩形是源图像：
firefox浏览器下效果
转自w3school ,
你可能感兴趣的文章
【转】 简单的3个SQL视图搞定所有SqlServer数据库字典
查看>>
WF从入门到精通（第八章）：调用外部方法及工作流 （转）
查看>>
WPF中两种设计模式操作XML转实体类
查看>>
如何编写Silverlight动画效果控件
查看>>
Silverlight Forms Builder表单设计器: FreeForm 简介
查看>>
企业IM (或业务系统）web api的json格式设计思考（原创）
查看>>
Jira API传字符串的换行问题 （文本编辑器使用）
查看>>
读/写锁的实现和应用（高并发状态下的map实现）
查看>>
JIRA Rest JAVA Client API实现问题管理及自定义字段（原创）
查看>>
使用泛型SwingWorker与EDT事件分发线程保持通讯
查看>>
WebSocket集成XMPP网页即时通讯1：Java Web Project服务端/客户端Jetty9开发初探
查看>>
编写线程安全的Java缓存读写机制 （原创）
查看>>
优化openfire服务器提升xmpp 效率的15个方法（原创）
查看>>
JAVA线程本地变量ThreadLocal和私有变量的区别
查看>>
Liferay开发实战(2)：Service Builder生成持久化层，及开发服务层
查看>>
（原创）定时线程池中scheduleWithFixedDelay和scheduleAtFixedRate的区别
查看>>
Java异步执行多个HTTP请求的例子（需要apache http类库）
查看>>
(转)Java并发编程：线程池的使用方法
查看>>
一步步Cobol 400 上手自学入门教程01 - 基础概念
查看>>
（原创）Callable、FutureTask中阻塞超时返回的坑点
查看>>