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>

globalCompositeOperation 学习的更多相关文章

  1. Canvas学习：globalCompositeOperation详解

    在默认情况之下,如果在Canvas之中将某个物体(源)绘制在另一个物体(目标)之上,那么浏览器就会简单地把源特体的图像叠放在目标物体图像上面. 简单点讲,在Canvas中,把图像源和目标图像,通过Ca ...

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

    一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...

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

    通过在CSDN中的一些简单课程学习,跟随老师联系,做了如下的月亮,太阳和地球的运动效果.纪录在文章中,用于下次使用. 准备工作如下: 1. 使用三张背景图片 太阳 月亮 地球 2. 在HTML页面中定 ...

  4. （私人收藏）[开发必备]HTML5最全快速查找离线手册（可查询可学习，带实例）

    [开发必备]HTML5最全快速查找离线手册(可查询可学习,带实例) HTML5最全快速查找离线手册:https://pan.baidu.com/s/19seE8TJQSx4IsWgXtKQS0Aj9y ...

  5. 从直播编程到直播教育：LiveEdu.tv开启多元化的在线学习直播时代

    2015年9月,一个叫Livecoding.tv的网站在互联网上引起了编程界的注意.缘于Pingwest品玩的一位编辑在上网时无意中发现了这个网站,并写了一篇文章<一个比直播睡觉更奇怪的网站:直 ...

  6. Angular2学习笔记（1）

    Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...

  7. ABP入门系列（1）——学习Abp框架之实操演练

    作为.Net工地搬砖长工一名,一直致力于挖坑(Bug)填坑(Debug),但技术却不见长进.也曾热情于新技术的学习,憧憬过成为技术大拿.从前端到后端,从bootstrap到javascript,从py ...

  8. 消息队列——RabbitMQ学习笔记

    消息队列--RabbitMQ学习笔记 1. 写在前面 昨天简单学习了一个消息队列项目--RabbitMQ,今天趁热打铁,将学到的东西记录下来. 学习的资料主要是官网给出的6个基本的消息发送/接收模型, ...

  9. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

随机推荐

  1. php float 转int

    round(x,prec) 参数 描述 x 可选.规定要舍入的数字. prec 可选.规定小数点后的位数. <?php echo(round(0.60)); echo(round(0.50)); ...

  2. mysql--存储过程（入门篇）

    h2 { color: #fff; background-color: #7CCD7C; padding: 3px; margin: 10px 0px } h3 { color: #fff; back ...

  3. 微信小程序 app.json 配置

    我们使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. 以下是一个包含了所有配置选项的简单配置app.json : { " ...

  4. hibou 主界面自己侧滑的定义

    要打滑View参加UIPanGestureRecognizer #pragma mark 手势识别器回调方法 - (void)dragView:(UIPanGestureRecognizer *)ge ...

  5. Oracle11g重建EM 报ORA-20001: SYSMAN already exists

    日志: Apr , :: PM oracle.sysman.emcp.EMReposConfig createRepository : SYSMAN already exists.. ORA-0651 ...

  6. struts2 s:if 的字符串比较问题

    如果数据库字段的数据类型为string or  char 类型,此时在页面 <s:if test=""></s:if> 中test <s:iterat ...

  7. UVA 11491 Erasing and Winning

    题意: 给你一个n位整数,让你删掉d个数字,剩下的数字要尽量大. 分析: 用了vector数组模拟.如果当前要插入的数>vector数组里的最后一位数,就替换且d-- 代码: #include ...

  8. （九）Android权限系统

    一.WebView请求权限实例 1.WebView获取网页访问权限的xml布局文件和MainActivity中的程序如下 <WebView android:layout_width=" ...

  9. UIScrollView基本使用

    - (void)viewDidLoad { [super viewDidLoad]; scrollView = [[UIScrollView alloc] initWithFrame:CGRectMa ...

  10. Search in Sorted Array,Search in Rotated Sorted Array,Search in Rotated Sorted ArrayII

    一:Search in Sorted Array 二分查找,可有重复元素,返回target所在的位置,只需返回其中一个位置,代码中的查找范围为[low,high),左闭右开,否则容易照成死循环. 代码 ...