【HTML5】Canvas之globalCompositeOperation属性详解

globalCompositeOperation即Canvas中的合成操作。

1、source-over

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

[html] view plaincopy

  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

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

[html] view plaincopy

  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

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

[html] view plaincopy

  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相反，目标绘制在源之上

[html] view plaincopy

  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

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

[html] view plaincopy

  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相反，在源于目标重叠的区域保留目标。而不重叠的部分都变成透明的。

[html] view plaincopy

  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

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

[html] view plaincopy

  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

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

[html] view plaincopy

  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，结果就为白色。

[html] view plaincopy

  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

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

[html] view plaincopy

  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

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

[html] view plaincopy

  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>

时间： 2024-08-09 10:37:04

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

html5 Canvas绘制图形入门详解

html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome.Opera.Safari.IE9+)都已经开始支持html5了.除此之外,在移动浏览器市场上,众多的移动浏览器也纷纷展开关于「html5的支持能力以及性能表现」的军备竞赛.html作为革命性的网页技术标准,再加上众多浏览器厂商或组织的鼎力支持,可以想见,html5将会成为未来网页技术的领头羊. ht

HTML5 Canvas绚丽的小球详解

实例说明: 实例使用HTML5+CSS+JavaScript实现小球的运动效果 掌握Canvas的基本用法 技术要点: 从需求出发 分析Demo要实现的功能 擅于使用HTML5 Canvas 参考手册 主要分为两个部分: 静态布局:小球的设计,包括小球的位置.颜色.大小和大小变化情况等,初始化小球的函数,渲染函数,Update函数 动态主体:变量.数组的的定义,小球显示时长定时,鼠标移动触发小球运动的函数 代码部分: canvas标签,提供绘图的画布 js逻辑:静态小球 其中,_init()函数

Html5之高级-2 HTML5表单属性(属性介绍、属性详解)

一.属性介绍 属性介绍 - 有一些输入类型要求使用特定的属性才能显示效果,如前面提到过min,max,step. 其他输入类型需要使用一些属性来改进其他性能,或者决定验证过程的重要性.HTML5 标准中再原来的基础上增加了一些新的属性. - Placeholder 属性 - Nultiple 属性 - Autofocus 属性 - Form 属性 二.属性详解 Placeholder 属性 - Placeholder 属性通常用于search输入类型,也可以用在文本域.它表示一个简单提示.单词或

HTML5基础与Meta http-equiv属性详解

HTML基础知识 <!DOCTYPE> 声明帮助浏览器正确地显示网页. <html> 元素定义了整个 HTML 文档. 现代网站都使用meta来声明页面内容的编码格式,我们推荐这种方式 : <meta http-equiv="Content-Type" content="text/html; charset=GBK"> 参考: head元素(head)及其包含的子元素 <head>    定义关于文档的信息. <

css动画-animation各个属性详解（转）

CSS3的animation很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题. 一.动画属性: 动画属性包括:①animation-name,②animation-duration,③animation-timing-function, 以下是各属性详解: 1.animation-name:指定要绑定到选择器的关键帧的名称. 2.animation-duration:定义动画完成一个周期需要多少秒或毫秒 3.a

jQuery Event.which 属性详解

jQuery Event.which 属性详解 which属性用于返回触发当前事件时按下的键盘按键或鼠标按钮. 对于键盘和鼠标事件,该属性用于确定你按下的是哪一个键盘按键或鼠标按钮. which属性对DOM原生的event.keyCode和event.charCode进行了标准化. 适用的事件类型主要有键盘事件:keypress.keydown.keyup,以及鼠标事件:mouseup.mousedown. 该属性属于jQuery的Event对象(实例). 语法 jQuery 1.1.3 新增该

WPF依赖属性详解

WPF依赖属性详解 WPF 依赖属性 英文译为 Dependency Properties,是WPF引入的一种新类型的属性,在WPF中有着极为广泛的应用,在WPF中对于WPF Dependency Properties 的使用贯穿样式的使用,数据绑定,动画等等,在刚刚接触Dependency Properties的时候可能觉得有些奇怪,但是,当你了解他要解决的问题的时候,你可能就不觉得奇怪了.Dependency Properties第一个要解决的问题就是控件的属性共享问题,由于大部分的WPF控

Hibernate fetch属性详解

主要参考 :http://4045060.blog.51cto.com/4035060/1088025 一.hibernate抓取策略(单端代理的批量抓取fetch=select(默认)/join) 1)保持默认,同fetch="select" <many-to-one name="group" column="group_id" fetch="select" /> 另外发送一条select语句抓取当前对象关联实体

MWPhotoBrowser 属性详解 和代理解释

--------0.MWPhoto简单属性解释---------------- MWPhoto *photo = [MWPhoto photoWithURL:[NSURL URLWithString:@"http://farm4.static.flickr.com/3629/3339128908_7aecabc34b.jpg"]]; photo.caption = @"在将photo添加到数组中时,可以在这里设置标题名字"; photo = [MWPhotophot