source-over 默认,相交部分由后绘制图形的填充(颜色,渐变,纹理)覆盖
source-in 只绘制相交部分,由后绘制图形的填充覆盖,其余部分透明

source-out 只绘制后绘制图形不相交的部分,由后绘制图形的填充覆盖,其余部分透明

source-atop 后绘制图形不相交的部分透明,相交部分由后绘制图形的填充覆盖

destination-over 相交部分由先绘制图形的填充(颜色,渐变,纹理)覆盖

destination-in 只绘制相交部分,由先绘制图形的填充覆盖,其余部分透明

destination-out 只绘制先绘制图形不相交的部分,由先绘制图形的填充覆盖,其余部分透明

destination-atop 先绘制图形不相交的部分透明,相交部分由先绘制图形的填充覆盖

lighter 相交部分由根据先后图形填充来增加亮度

darker 相交部分由根据先后图形填充来降低亮度

copy 只绘制后绘制图形

xor 相交部分透明

canvas globalCompositeOperation的更多相关文章

  1. HTML5 canvas globalCompositeOperation绘图类型讲解

    我们总是将一个图形画在另一个之上,大多数情况下,这样是不够的.比如说,它这样受制于图形的绘制顺序.不过,我们可以利用 globalCompositeOperation 属性来改变这些做法.global ...

  2. [ html canvas globalCompositeOperation ] canvas绘图属性 设置合成图像如何显示 属性演示

    <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...

  3. Canvas globalCompositeOperation API

    参考: http://www.cnblogs.com/jenry/archive/2012/02/11/2347012.html <!DOCTYPE html> <html lang ...

  4. HTML 5 canvas globalCompositeOperation 属性

    做一个canvas鼠标跟随动画的时候用到了,就copy w3c的解释整理一番: globalCompositeOperation 属性设置或返回如何将一个源(新的)图像绘制到目标(已有)的图像上. 源 ...

  5. canvas —— globalCompositeOperation

    globalCompositeOperation 属性设置或返回如何将一个源(新的)图像绘制到目标(已有)的图像上. 源图像 = 您打算放置到画布上的绘图. 目标图像 = 您已经放置在画布上的绘图. ...

  6. 两个Canvas小游戏

    或许连小游戏都算不上,可以叫做mini游戏. 没有任何框架或者稍微有点深度的东西,所以有js基础的或者要追求炫酷效果的可以直接ctrl+w了. 先贴出两个游戏的试玩地址: 是男人就走30步 是男人就忍 ...

  7. html5 canvas+js实现ps钢笔抠图

    html5 canvas+js实现ps钢笔抠图 1. 项目要求需要用js实现photoshop中钢笔抠图功能,就用了近三四天的时间去解决它,最终还是基本上把他实现了. 做的过程中走了不少弯路,最终一同 ...

  8. html5 canvas画布上合成

    source-over 默认.在目标图像上显示源图像. source-atop 在目标图像顶部显示源图像.源图像位于目标图像之外的部分是不可见的. source-in 在目标图像中显示源图像.只有目标 ...

  9. html5 canvas+js实现ps钢笔抠图（速抠图 www.sukoutu.com）

    html5 canvas+js实现ps钢笔抠图(速抠图 www.sukoutu.com)   根据html5 canvas+js实现ps钢笔抠图的实现,aiaito 开发者开发了一套在线抠图工具,速抠 ...

随机推荐

  1. Docker 坑点记录

    1 关于 Docker Windows 文件夹问题 C:\Users Docker Machine tries to auto-share your /Users (OS X) or C:\Users ...

  2. wordpress安装插件提示“wordpress发生意外错误，可能WordPress.org或服务器配置文件存在问题”

    安装wordpress插件,提示报错“wordpress发生意外错误,可能WordPress.org或服务器配置文件存在问题” 出问题的页面是http://*.*.*.*/wp-admin/updat ...

  3. codeforces291E Tree-String Problem

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...

  4. java23种设计模式之二: 单例设计模式(6种写法)

    目的:在某些业务场景中,我们需要某个类的实例对象的只能有一个,因此我们需要创建一些单例对象. 本文共有6种写法,仅供参考 1.饿汉式 优点: 在多线程情况下,该方法创建的单例是线程安全的(立即加载) ...

  5. PHP 重载方法 __call()

    __call() 方法用于监视错误的方法调用. __call()(Method overloading) 为了避免当调用的方法不存在时产生错误,可以使用 __call() 方法来避免.该方法在调用的方 ...

  6. cookie与session（略谈）

    cookie (储存在用户本地终端上的数据) Cookie,有时也用其复数形式 Cookies,指某些网站为了辨别用户身份.进行 session 跟踪而储存在用户本地终端上的数据(通常经过加密).定义 ...

  7. windows service 2008 内存吃尽解决方案

    最近用windows2008,发现系统运行一段时间后,内存吃紧,赶紧打开资源查看器,发现当前运行的程序占有内存都很小,后经查资料,原来是被windows2008的文件缓存吃尽了,这是windows20 ...

  8. Wannafly挑战赛14E无效位置

    https://www.nowcoder.com/acm/contest/81/E 给一个1-base数组{a},有N次操作,每次操作会使一个位置无效.一个区间的权值定义为这个区间里选出一些数的异或和 ...

  9. 三十一 Python分布式爬虫打造搜索引擎Scrapy精讲—chrome谷歌浏览器无界面运行、scrapy-splash、splinter

    1.chrome谷歌浏览器无界面运行 chrome谷歌浏览器无界面运行,主要运行在Linux系统,windows系统下不支持 chrome谷歌浏览器无界面运行需要一个模块,pyvirtualdispl ...

  10. 在接口请求时报错Unrecognized field &quot;zZF1&quot

    这个问题是json序列化问题,当参数中出现大写字母组成的字段时(例如:ZZF1),此时需在字段上加入注解:@JsonProperty(value = "ZZF1")