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. mathematical method

    mathematical method 曲线拟合 指数 \(lnY = lna + bX\) 对数 \(Y = blnX + a\) 幂函数 \(lgY=lga+blgX\) 多元线性回归模型 回归分 ...

  2. 位运算 进制转化 STL中bitset用法

    2017-08-17 16:27:29 writer:pprp /* 题目名称:输入十进制以二进制显示 程序说明:同上 作者:pprp 备注:无 日期:2017/8/17 */ #include &l ...

  3. ELK 6.x 部署

    Elasticsearch版本:6.3.2 Kibana版本:6.3.2 1.es安装 按照官方提示操作即可. 通过yum安装或者下载tar包解压. 安装完成之后,需要修改一些配置 ①修改文件 /et ...

  4. 利用Java.util.UUID来生成唯一ID(用来做数据库主键好用)

    UUID(Universally Unique Identifier)全局唯一标识符,是指在一台机器上生成的数字,它保证对在同一时空中的所有机器都是唯一的.按照开放软件基金会(OSF)制定的标准计算, ...

  5. w3c标准盒模型与IE传统模型的区别

    一.盒子模型(box model) 在HTML文档中的每个元素被描绘为矩形盒子.确定其大小,属性——比如颜色.背景.边框,及其位置是渲染引擎的目标. CSS下这些矩形盒子由标准盒模型描述.这个模型描述 ...

  6. 转载：Mongodb start

    Mongodb 操作 Start MongoDB The MongoDB instance stores its data files in the /var/lib/mongo and its lo ...

  7. cordova安卓sdk

    Android SDK在线更新镜像服务器来下载安装: 1.北京化工大学镜像服务器地址: IPv4: ubuntu.buct.edu.cn/ 端口:80 IPv4: ubuntu.buct.cn/ 端口 ...

  8. flask学习(十一)：if判断语句

    1. 语法: {% if xxx %} {% else %} {% endif %} 2. if的使用,和python中if相差无几 用if判断,当用户名存在且年龄大于18时,才显示用户名和注销

  9. Tomcat中session共享问题的简单解决办法

    tomcat-redis-session-manager 使用redis配置tomcat共享session 结构图: 分析: 分布式web server集群部署后需要实现session共享,针对 to ...

  10. 第十天 1-9 rhel7-文件的归档和压缩

    大纲:文件的归档和压缩1.tar命令的使用及参数解析tar.gz.bz/bz2文件的创建.查看及解压zip/unzip命令的使用 一.文件的归档和压缩 在我们的计算机中,经常会遇到有好多文件名相似或作 ...