globalCompositeOperation 学习

globalCompositeOperation

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>

时间： 2024-11-04 13:39:50

globalCompositeOperation 学习的相关文章

学习HTML5, Canvas及简单动画的使用

通过在CSDN中的一些简单课程学习,跟随老师联系,做了如下的月亮,太阳和地球的运动效果.纪录在文章中,用于下次使用. 准备工作如下: 1. 使用三张背景图片 太阳 月亮 地球 2. 在HTML页面中定义一个CANVAS 1 <body> 2 <div style="background-color:green;text-align:center ;"> 3 <canvas id="c" style="background-co

[Canvas学习]变形

学习目的:使用变形:移动,旋转,缩放栅格,创造出更强大的图形. 状态的保存与恢复Saving and restoring state canvas的状态就是当前画面应用的所有样式和变形的一个快照,canvas的状态被存储在栈中,每当save方法被调用后,当前状态就会被推送到栈中保存. 状态信息包括:当前应用的变形: strokeStyle; fillStyle; globalAlpha; lineWidth; lineCap; lineJoin; miterLimit; shadowOffset

[Canvas学习]动画

学习目的:通过JavaScript操控<canvas>对象,实现交互动画. 动画的基本步骤 1. 清空canvas,使用clearRect方法 2. 保存canvas状态 3. 绘制动画图形 4. 恢复canvas状态 操控动画Controlling an animation setInterval(function, delay) setTimeout(function, delay) requestAnimationFrame(callback) 太阳系运动的小例子 <canvas

HTML5 Canvas 学习笔记（canvas绘制线条、矩形、多边形、圆形、圆环、组合图形、文字、自定义图像）

学习资源:http://www.w3school.com.cn/html5/html_5_canvas.asp   http://blog.csdn.net/clh604/article/details/8536059   http://www.jb51.net/html5/70307.html 一.对 canvas 的理解 <canvas>标签是 HTML5 中的新标签,像所有的 dom 对象一样它有自己本身的属性.方法和事件. canvas 是用来在网页上绘制图形的(我们通常称之为画布),

简单入门canvas - 通过刮奖效果来学习

一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下,通过一个刮奖效果来学习. 二.canvas基础 本文的目标是做一个刮奖效果,但是如果都不知道canvas是怎么回事,那么肯定也无法进行下去,所以先讲讲canvas基础吧. 首先,该怎么理解canvas,思来想去,最好的理解办法应该就是把canvas理解为一个空白的画纸,一张你可以在上面画画的纸. 然

Vue.js学习笔记：属性绑定 v-bind

v-bind  主要用于属性绑定,Vue官方提供了一个简写方式 :bind,例如: <!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a> 绑定HTML Class 一.对象语法: 我们可以给v-bind:class 一个对象,以动态地切换class.注意:v-bind:class指令可以与普通的class特

Java多线程学习（吐血超详细总结）

林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 目录(?)[-] 一扩展javalangThread类 二实现javalangRunnable接口 三Thread和Runnable的区别 四线程状态转换 五线程调度 六常用函数说明 使用方式 为什么要用join方法 七常见线程名词解释 八线程同步 九线程数据传递 本文主要讲了java中多线程的使用方法.线程同步.线程数据传递.线程状态及相应的一些线程函数用法.概述等. 首先讲一下进程和线程

微信小程序学习总结（2）------- 之for循环，绑定点击事件

最近公司有小程序的项目,本人有幸参与其中,一个项目做下来感觉受益匪浅,与大家做下分享,欢迎沟通交流互相学习. 先说一下此次项目本人体会较深的几个关键点:微信地图.用户静默授权.用户弹窗授权.微信充值等等. 言归正传,今天分享我遇到的关于wx:for循环绑定数据的一个tips:  1. 想必大家的都知道wx:for,如下就不用我啰嗦了: <view class="myNew" wx:for="{{list}}">{{item.title}}<view

【安全牛学习笔记】

弱点扫描 ╋━━━━━━━━━━━━━━━━━━━━╋ ┃发现弱点                                ┃ ┃发现漏洞                                ┃ ┃  基于端口五福扫描结果版本信息(速度慢)┃ ┃  搜索已公开的漏洞数据库(数量大)      ┃ ┃  使用弱点扫描器实现漏洞管理            ┃ ╋━━━━━━━━━━━━━━━━━━━━╋ [email protected]:~# searchsploit Usage: