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. hiho 1323 : 回文字符串 dp

    #1323 : 回文字符串 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 给定一个字符串 S ,最少需要几次增删改操作可以把 S 变成一个回文字符串? 一次操作可以在任 ...

  2. 实例化后的list的默认值

    public class List默认值 { public static void main(String[] args) { List<String> arrayList = new A ...

  3. Codeforces Round #424

    基本全是水题 第一题水,不过有hack点,先增后不变再减 #include<map> #include<set> #include<cmath> #include& ...

  4. 13.LockSupport工具

    1. LockSupport简介 在之前介绍AQS的底层实现,已经在介绍java中的Lock时,比如ReentrantLock,ReentReadWriteLocks,已经在介绍线程间等待/通知机制使 ...

  5. HQL查询中取个别几个字段

    数据表:

  6. POJ 3167 Cow Pattern ★(KMP好题)

    题意 给你一个数字序列S,再给一个数字序列pattern,S和pattern中的数字都是1到s(s<=25).每个序列里的数字都有个排名,也就是第几小,现在我们要用pattern来匹配S.在本题 ...

  7. wordcount程序出现map 100% reduce 0%问题的解决方法

    运行wordcount程序一直停在map 100% reduce 0%, input文件夹的内容: 其中: f1.txt中的内容为:hello hadoop f2.txt中的内容为:hello had ...

  8. 抽奖小程序，js,canvas

    js写的网页抽奖小程序,先上截图 源码地址:https://github.com/xiachaoxulu/raffle

  9. CF 914

    照例看A 然后A了 看B 似乎博弈一下就可以了 然后看C 似乎是DP 然后看了room woc似乎有黑红名 赶紧hack 然后没有人有问题 思考为什么 突然看到房间有15hack... 好吧我做D 然 ...

  10. Java中用反码表示整数，及int到byte的转换

    Java中的整数都是通过补码表示的,当整数为正数时,补码和原码相同,当整数为负数时,补码为原码按位取反(符号位除外),然后加1. 通过一些例子可以比较明显的看出: int a = -1; System ...