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. codeforces Round#429 (Div2)

    2017-08-20 10:00:37 writer:pprp 用头文件#include <bits/stdc++.h>很方便 A. Generous Kefa codeforces 84 ...

  2. close与shutdown系统调用

    使用多线程时,pthread_create的参数flag有CLONE_FILES, 最终调用do_fork(),并且会根据CLONE_FILES标志来调用copy_files()来共享父进程中的文件描 ...

  3. C#错误的面试题

    你面试的时候是不是碰到这样的问题 String s = new String("xyz");创建了几个String Object? ,对于这个问题,我之前也一直以为是对的,这样写是 ...

  4. Visual Studio 2010 C++ 属性设置基础

    在 <Visual Studio 2010 C++ 工程文件解读>中提到了C++工程中可以进行用户自定义的属性设置,如何进行属性设置呢? 下面我们来了解一下 props 文件的基本规则: ...

  5. php-fpm 与 cgi

    CGI是干嘛的?CGI是为了保证web server传递过来的数据是标准格式的,方便CGI程序的编写者. web server(比如说nginx)只是内容的分发者.比如,如果请求/index.html ...

  6. cassandra 之 在spark-shell 中使用 spark cassandra connector 完整案例

    1.cassandra 准备 启动cqlsh, CQLSH_HOST=172.16.163.131 bin/cqlsh cqlsh>CREATE KEYSPACE productlogs WIT ...

  7. javascript深入浅出

    第一章 数据类型 1,六种数据类型:原始类型(number,string,boolean,null,undefined) + object对象(Function Array Date) 2,隐式转换: ...

  8. 二十一 Python分布式爬虫打造搜索引擎Scrapy精讲—爬虫数据保存

    注意:数据保存的操作都是在pipelines.py文件里操作的 将数据保存为json文件 spider是一个信号检测 # -*- coding: utf-8 -*- # Define your ite ...

  9. Java SHA256/Base64转.NET(C#)实现---(华为云云市场.NET版本加密方式)

    前言: 工作需要,对接华为云应用市场的 API 接口,由于维护团队都是 .NET 所以用 .NET 来开发. 简单了解一下 SHA256 加密算法,本质就是一个 Hash,与 MD5 相比就是计算量大 ...

  10. 【Supervisor】Linux 后台进程管理利器

    Linux的后台进程运行有好几种方法,例如nohup,screen等,但是,如果是一个服务程序,要可靠地在后台运行,我们就需要把它做成daemon,最好还能监控进程状态,在意外结束时能自动重启. su ...