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. 解题报告：codeforce 7C Line

    codeforce 7C C. Line time limit per test1 second memory limit per test256 megabytes A line on the pl ...

  2. 2017 ACM-ICPC 亚洲区（南宁赛区）网络赛 B题

    2017-09-24 19:16:38 writer:pprp 题目链接:https://www.jisuanke.com/contest/877 题目如下: You are given a list ...

  3. Python学习札记(十六) 高级特性2 迭代

    参考:迭代 Note 1.如果给定一个list或tuple,我们可以通过for循环来遍历这个list或tuple,这种遍历我们称为迭代(Iteration). 在C.C++.Java等语言中,for循 ...

  4. Python学习札记(九) Basic6 dict and set

    参考:dict and set Note: A.dict Hint:注意最后三点. 1.Python内置字典dict,全称directory,在别的语言如C++中称为map,使用键值-value存储, ...

  5. CSP(Content Security Policy) 入门教程

    参考: http://www.ruanyifeng.com/blog/2016/09/csp.html https://developer.mozilla.org/en-US/docs/Web/HTT ...

  6. 数据库原理及应用-用户接口及SQL查询语言（Query Language）

    2018-02-07 20:41:39 一.DBMS的用户接口 查询语言 访问DBMS的访问工具(GUI) API 相关类库 二.SQL语言 SQL语言可以细分为四种: 1.Data Definiti ...

  7. table 转实体

    public class Table2Entity<T> where T : class,new() { public static List<T> GetEntitys(Da ...

  8. Mysql加载配置默认路径

    查看命令 mysqld --verbose --help|grep "Default options" -n1 输出结果 11-12:Default options are rea ...

  9. bzoj4945

    题解: 一眼看过去还以为是3-sat 其实d只有8 那么我们可以枚举每一个x选择哪一个 然后再用2-sat处理 代码: #include<bits/stdc++.h> using name ...

  10. gcc中关于静态库和动态库使用（转）

    转自:http://blog.chinaunix.net/uid-25871104-id-3069931.html 1,如何生成静态库 静态库只是一堆object对象的集合,使用ar命令可以将.o文件 ...