globalCompositeOperation即Canvas中的合成操作。

1、source-over

这是默认值，他表示绘制的图形将画在现有画布之上

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  7. <script type="text/javascript">
  8. $(document).ready(function(){
  9. var canvas=document.getElementById("myCanvas");
  10. var context=canvas.getContext("2d");
  11. context.fillStyle="rgb(63,169,245)";
  12. context.fillRect(50,50,100,100);
  13. context.globalCompositeOperation="source-over"
  14. context.fillStyle="rgb(255,123,172)";
  15. context.fillRect(100,100,100,100);
  16. });
  17. </script>
  18. </head>
  19. <body>
  20. <canvas id="myCanvas" width="1000px" height="1000px"></canvas>
  21. </body>
  22. </html>

2、destination-over

这个操作的值与前一个值相反，所以现在目标绘制在源之上

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  7. <script type="text/javascript">
  8. $(document).ready(function(){
  9. var canvas=document.getElementById("myCanvas");
  10. var context=canvas.getContext("2d");
  11. context.fillStyle="rgb(63,169,245)";
  12. context.fillRect(50,50,100,100);
  13. context.globalCompositeOperation="destination-over"
  14. context.fillStyle="rgb(255,123,172)";
  15. context.fillRect(100,100,100,100);
  16. });
  17. </script>
  18. </head>
  19. <body>
  20. <canvas id="myCanvas" width="1000px" height="1000px"></canvas>
  21. </body>
  22. </html>

3、source-atop

这个操作会将源绘制在目标之上，但是在重叠区域上两者都是不透明的。绘制在其他位置的目标是不透明的，但源是透明的。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  7. <script type="text/javascript">
  8. $(document).ready(function(){
  9. var canvas=document.getElementById("myCanvas");
  10. var context=canvas.getContext("2d");
  11. context.fillStyle="rgb(63,169,245)";
  12. context.fillRect(50,50,100,100);
  13. context.globalCompositeOperation="source-atop"
  14. context.fillStyle="rgb(255,123,172)";
  15. context.fillRect(100,100,100,100);
  16. });
  17. </script>
  18. </head>
  19. <body>
  20. <canvas id="myCanvas" width="1000px" height="1000px"></canvas>
  21. </body>
  22. </html>

4、destination-atop

这个操作与source-atop相反，目标绘制在源之上

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  7. <script type="text/javascript">
  8. $(document).ready(function(){
  9. var canvas=document.getElementById("myCanvas");
  10. var context=canvas.getContext("2d");
  11. context.fillStyle="rgb(63,169,245)";
  12. context.fillRect(50,50,100,100);
  13. context.globalCompositeOperation="destination-atop"
  14. context.fillStyle="rgb(255,123,172)";
  15. context.fillRect(100,100,100,100);
  16. });
  17. </script>
  18. </head>
  19. <body>
  20. <canvas id="myCanvas" width="1000px" height="1000px"></canvas>
  21. </body>
  22. </html>

5、source-in

在源于目标重叠的区域只绘制源，而不重叠的部分编程透明的。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  7. <script type="text/javascript">
  8. $(document).ready(function(){
  9. var canvas=document.getElementById("myCanvas");
  10. var context=canvas.getContext("2d");
  11. context.fillStyle="rgb(63,169,245)";
  12. context.fillRect(50,50,100,100);
  13. context.globalCompositeOperation="source-in"
  14. context.fillStyle="rgb(255,123,172)";
  15. context.fillRect(100,100,100,100);
  16. });
  17. </script>
  18. </head>
  19. <body>
  20. <canvas id="myCanvas" width="1000px" height="1000px"></canvas>
  21. </body>
  22. </html>

6、destination-in

这个操作与source-in相反，在源于目标重叠的区域保留目标。而不重叠的部分都变成透明的。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  7. <script type="text/javascript">
  8. $(document).ready(function(){
  9. var canvas=document.getElementById("myCanvas");
  10. var context=canvas.getContext("2d");
  11. context.fillStyle="rgb(63,169,245)";
  12. context.fillRect(50,50,100,100);
  13. context.globalCompositeOperation="destination-in"
  14. context.fillStyle="rgb(255,123,172)";
  15. context.fillRect(100,100,100,100);
  16. });
  17. </script>
  18. </head>
  19. <body>
  20. <canvas id="myCanvas" width="1000px" height="1000px"></canvas>
  21. </body>
  22. </html>

7、source-out

在与目标不重叠的区域上绘制源，其他部分都变成透明的。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  7. <script type="text/javascript">
  8. $(document).ready(function(){
  9. var canvas=document.getElementById("myCanvas");
  10. var context=canvas.getContext("2d");
  11. context.fillStyle="rgb(63,169,245)";
  12. context.fillRect(50,50,100,100);
  13. context.globalCompositeOperation="source-out"
  14. context.fillStyle="rgb(255,123,172)";
  15. context.fillRect(100,100,100,100);
  16. });
  17. </script>
  18. </head>
  19. <body>
  20. <canvas id="myCanvas" width="1000px" height="1000px"></canvas>
  21. </body>
  22. </html>

8、destination-out

在与源不重叠的区域上保留目标。其他部分都变成透明的。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  7. <script type="text/javascript">
  8. $(document).ready(function(){
  9. var canvas=document.getElementById("myCanvas");
  10. var context=canvas.getContext("2d");
  11. context.fillStyle="rgb(63,169,245)";
  12. context.fillRect(50,50,100,100);
  13. context.globalCompositeOperation="destination-out"
  14. context.fillStyle="rgb(255,123,172)";
  15. context.fillRect(100,100,100,100);
  16. });
  17. </script>
  18. </head>
  19. <body>
  20. <canvas id="myCanvas" width="1000px" height="1000px"></canvas>
  21. </body>
  22. </html>

9、lighter

这个值与顺序无关，如果源与目标重叠，就将两者的颜色值想家。得到的颜色值的最大取值为255，结果就为白色。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  7. <script type="text/javascript">
  8. $(document).ready(function(){
  9. var canvas=document.getElementById("myCanvas");
  10. var context=canvas.getContext("2d");
  11. context.fillStyle="rgb(63,169,245)";
  12. context.fillRect(50,50,100,100);
  13. context.globalCompositeOperation="lighter"
  14. context.fillStyle="rgb(255,123,172)";
  15. context.fillRect(100,100,100,100);
  16. });
  17. </script>
  18. </head>
  19. <body>
  20. <canvas id="myCanvas" width="1000px" height="1000px"></canvas>
  21. </body>
  22. </html>

10、copy

这个值与顺序无关，只绘制源，覆盖掉目标。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  7. <script type="text/javascript">
  8. $(document).ready(function(){
  9. var canvas=document.getElementById("myCanvas");
  10. var context=canvas.getContext("2d");
  11. context.fillStyle="rgb(63,169,245)";
  12. context.fillRect(50,50,100,100);
  13. context.globalCompositeOperation="copy"
  14. context.fillStyle="rgb(255,123,172)";
  15. context.fillRect(100,100,100,100);
  16. });
  17. </script>
  18. </head>
  19. <body>
  20. <canvas id="myCanvas" width="1000px" height="1000px"></canvas>
  21. </body>
  22. </html>

11、xor

这个值与顺序无关，只绘制出不重叠的源与目标区域。所有重叠的部分都变成透明的

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  7. <script type="text/javascript">
  8. $(document).ready(function(){
  9. var canvas=document.getElementById("myCanvas");
  10. var context=canvas.getContext("2d");
  11. context.fillStyle="rgb(63,169,245)";
  12. context.fillRect(50,50,100,100);
  13. context.globalCompositeOperation="xor"
  14. context.fillStyle="rgb(255,123,172)";
  15. context.fillRect(100,100,100,100);
  16. });
  17. </script>
  18. </head>
  19. <body>
  20. <canvas id="myCanvas" width="1000px" height="1000px"></canvas>
  21. </body>
  22. </html>

【HTML5】Canvas之globalCompositeOperation属性详解的更多相关文章

  1. [js高手之路] html5 canvas系列教程 - 状态详解(save与restore)

    本文内容与路径([js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解)是canvas中比较重要的概念.掌握理解他们是做出复杂canvas动 ...

  2. html5 Canvas绘制图形入门详解

    html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...

  3. HTML5 Canvas绚丽的小球详解

    实例说明: 实例使用HTML5+CSS+JavaScript实现小球的运动效果 掌握Canvas的基本用法 技术要点: 从需求出发 分析Demo要实现的功能 擅于使用HTML5 Canvas 参考手册 ...

  4. HTML重要标签及属性详解

    我学习前端的时间不长,短短1个月而已,只学了些HTML5和CSS3还有少许javascript,另外还有网页布局等等辅助性书籍,我在模仿网页以及完成百度前端技术学院的任务过程中发现了我容易忘记的标签以 ...

  5. android:exported 属性详解

    属性详解 标签: android 2015-06-11 17:47 27940人阅读 评论(7) 收藏 举报 分类: Android(95) 项目点滴(25) 昨天在用360扫描应用漏洞时,扫描结果, ...

  6. OutputCache属性详解（一）一Duration、VaryByParam

    目录 OutputCache概念学习 OutputCache属性详解(一) OutputCache属性详解(二) OutputCache属性详解(三) OutputCache属性详解(四)— SqlD ...

  7. OutputCache属性详解（二）一 Location

    目录 OutputCache概念学习 OutputCache属性详解(一) OutputCache属性详解(二) OutputCache属性详解(三) OutputCache属性详解(四)— SqlD ...

  8. OutputCache属性详解（三）— VaryByHeader,VaryByCustom

    目录 OutputCache概念学习 OutputCache属性详解(一) OutputCache属性详解(二) OutputCache属性详解(三) OutputCache属性详解(四)— SqlD ...

  9. OutputCache属性详解（四）— SqlDependency

    目录 OutputCache概念学习 OutputCache属性详解(一) OutputCache属性详解(二) OutputCache属性详解(三) OutputCache属性详解(四)— SqlD ...

随机推荐

  1. 第48条：如果需要精确的答案，请避免使用float和double

    float和double主要为了科学计算和工程计算而设计,执行二进制浮点运算,这是为了在广泛的数值范围上提供较为精确的快速近似计算而精心设计的.然而,它们没有提供完全精确的结果,所以不适合用于需要精确 ...

  2. [转]select模型的一种技巧运用-libevent

    参见网址 http://www.cppblog.com/xvsdf100/archive/2013/12/10/204689.html

  3. mysql 乱码问题处理

    出现乱码的问题,主要就是因为数据在被处理的过程中,出现了编码和解码不对应造成的.因此解决编码问题的方法也就是在通过让编码和解码的过程能够对应起来就OK了,大学的而是,记得经常搞这个问题,今天又碰到了m ...

  4. 阿里云 CentOS 安装JDK

    初用阿里云,使用centOS linux64操作系统 . 自己上传jdk文件总是安装失败,原因估计是因为我的网络不好,导致文件损坏. 解决办法,直接在linux命令行模式下,到官网下载 jdk,命令如 ...

  5. android xml产生和解析

    public static void writeToXml(Map<String, Object> map,Writer writer) throws Exception, Illegal ...

  6. 设置nginx禁止通过IP访问服务器的方法

    在Nginx上设置禁止通过IP访问服务器,只允许通过域名访问,以避免别人把未备案的域名解析到自己的服务器IP而导致服务器被断网. nginx的默认虚拟主机允许用户通过IP访问,或者通过未设置的域名访问 ...

  7. MVC去掉传参时的验证：从客户端中检测到有潜在危险的Request.QueryString值

    解决方法:给Action添加属性[ValidateInput(false)]. 例: [ValidateInput(false)] public ActionResult Index(string o ...

  8. hibernate持久化操作注意

    15:05 2014/5/21 1.设置lazy为false可以立即加载配合get,lazy默认true,配合load使用. 2.把pojo类定义为final的类.为最终就可以不使用代理 3.pojo ...

  9. IDEA的使用

    1.设置字体file->setting->color$fonts->font 保存提示设置file->Settings -> Editor -> General - ...

  10. 黄聪：如何使用CodeSmith批量生成代码(转：http://www.cnblogs.com/huangcong/archive/2010/06/14/1758201.html)

    先看看CodeSmith的工作原理: 简单的说:CodeSmith首先会去数据库获取数据库的结构,如各个表的名称,表的字段,表间的关系等等,之后再根据用户自定义好的模板文件,用数据库结构中的关键字替代 ...