当两个或两个以上的图形存在重叠区域时，默认情况下一个图形画在前一个图像之上。通过指定图像globalCompositeOperation属性的值可以改变图形的绘制顺序或绘制方式，globalAlpha可以指定图形的透明度。

globalCompositeOperation 属性设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上。

源图像 = 您打算放置到画布上的绘图。

目标图像 = 您已经放置在画布上的绘图。

ctx.globalCompositeOperation = 'source-over'; 默认设置

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <title></title>

 <style type="text/css">

 *{padding: 0;margin:0;}

 body{background: #1b1b1b;}

 #div1{margin:50px auto; width:300px; height: 300px;}

 canvas{background: #fff;}

 </style>

 <script type="text/javascript">

 window.onload = function(){

     var c=document.getElementById("myCanvas");

     var ctx=c.getContext("2d");

     ctx.fillStyle="red";

     ctx.fillRect(20,20,75,50);

     ctx.fillStyle="blue";

     ctx.globalCompositeOperation="source-over";　　//在目标图像上显示源图像。

     ctx.fillRect(50,50,75,50);

     ctx.fillStyle="red";

     ctx.fillRect(150,20,75,50);

     ctx.fillStyle="blue";

     ctx.globalCompositeOperation="destination-over";　　//在源图像上方显示目标图像。

     ctx.fillRect(180,50,75,50);

 };

 </script>

 </head>

 <body>

     <div id="div1">

         <canvas id="myCanvas" width="300" height="300"></canvas>

     </div>

 </body>

 </html>

结果：

属性值：

source-over 默认。在目标图像上显示源图像。
source-atop 在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
source-in 在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。
source-out 在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。
destination-over 在源图像上方显示目标图像。
destination-atop 在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。
destination-in 在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。
destination-out 在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。
lighter 显示源图像 + 目标图像。
copy 显示源图像。忽略目标图像。
source-over 使用异或操作对源图像与目标图像进行组合。

eg:

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <title></title>

 <style type="text/css">

 canvas{border:1px solid #d1d1d1; margin:20px 20px 20px 0}

 </style>

 </head>

 <body style="margin: 50px;">

 <script type="text/javascript">

     var gco=new Array();

     gco.push("source-atop");

     gco.push("source-in");

     gco.push("source-out");

     gco.push("source-over");

     gco.push("destination-atop");

     gco.push("destination-in");

     gco.push("destination-out");

     gco.push("destination-over");

     gco.push("lighter");

     gco.push("copy");

     gco.push("xor");

     for (i=0;i<gco.length;i++){

         document.write("<div id='p_" + i + "' style='float:left;'>" + gco[i] + ":<br>");

         var c=document.createElement("canvas");

         c.width=120;

         c.height=100;

         document.getElementById("p_" + i).appendChild(c);

         var ctx=c.getContext("2d");

         ctx.fillStyle="blue";

         ctx.fillRect(10,10,50,50);

         ctx.globalCompositeOperation=gco[i];

         ctx.beginPath();

         ctx.fillStyle="red";

         ctx.arc(50,50,30,0,2*Math.PI);

         ctx.fill();

         document.write("</div>");

     }

 </script>

 </body>

 </html>

结果：

2、裁切路径

ctx.clip();  clip的作用是形成一个蒙板，没有被蒙板的区域会被隐藏。

eg：如果绘制一个图形，并进行裁切，则圆形之外的区域将不会绘制在canvas上。

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <title></title>

 <style type="text/css">

 *{padding: 0;margin:0;}

 body{background: #1b1b1b;}

 #div1{margin:50px auto; width: 300px;}

 canvas{background: #fff;}

 </style>

 <script type="text/javascript">

 window.onload = function(){

     draw();

 };

 function draw(){

     var ctx = document.getElementById('myCanvas').getContext('2d');

     ctx.fillStyle = '#000';

     ctx.fillRect(0,0,300,300);

     ctx.fill();

     //绘制圆形

     ctx.beginPath();

     ctx.arc(150,150,130,0,Math.PI*2,true);

     //裁切路径

     ctx.clip();

     ctx.translate(200,20);

     for( var i=0; i<90; i++){

         ctx.save();

         ctx.transform(0.95,0,0,0.95,30,30);

         ctx.rotate(Math.PI/12);

         ctx.beginPath();

         ctx.fillStyle = 'red';

         ctx.globalAlpha = '0.4';

         ctx.arc(0,0,50,0,Math.PI*2,true);

         ctx.closePath();

         ctx.fill();

     }

 }

 </script>

 </head>

 <body>

     <div id="div1">

         <canvas id="myCanvas" width="300" height="300"></canvas>

     </div>

 </body>

 </html>

canvas图形的组合与裁切的更多相关文章

  1. [html] 学习笔记-Canvas图形绘制处理

    使用Canvas API 可以将一个图形重叠绘制在另外一个图形上,也可以给图形添加阴影效果. 1.Canvas 图形组合 通过 globalCompositeOperation = 属性 来指定重叠效 ...

  2. canvas图形组合

    代码: 1 /** 2 * Created by Administrator on 2016/1/27. 3 */ 4 function draw (id){ 5 var canvas = docum ...

  3. Canvas 图形组合方式

    /** * 图形组合 */ function initDemo5() { var canvas = document.getElementById("demo5"); if (!c ...

  4. canvas图形绘制

    前面的话 前面分别介绍了canvas的基础用法和进阶用法,本文将使用canvas的各种语法进行图形绘制 绘制线条 [绘制线条] 下面来尝试绘制一段线条 <canvas id="draw ...

  5. HTML5 CANVAS 实现图片压缩和裁切

    原文地址:http://leonshi.com/2015/10/31/html5-canvas-image-compress-crop/?utm_source=tuicool&utm_medi ...

  6. canvas图形编辑器

    原文地址:http://jeffzhong.space/2017/11/02/drawboard/ 使用canvas进行开发项目,我们离不开各种线段,曲线,图形,但每次都必须用代码一步一步的实现.有没 ...

  7. 小强的HTML5移动开发之路（6）——Canvas图形绘制基础

    来自:http://blog.csdn.net/dawanganban/article/details/17686039 在前面提到Canvas是HTML5中一个重要特点,canvas功能非常强大,用 ...

  8. WPF 中Canvas图形移动、缩放代码

    从Flash转C#,很多内容一知半解,边摸索边前进,代码粗糙,权当留个脚印. 只是想得到一个基础的移动和缩放功能的界面,找了很久都是画线.画矩形等基础形状的代码,移动和缩放说的并不清晰,只能自己努力来 ...

  9. HTML5 Canvas ( 图形的透明度和遮盖 ) globalAlpha, globalCompositeOperation

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. Https之秘钥交换过程分析

    一.概念回顾 A <------M------> B场景:A.B两个人之间通讯,A传输信息M给B,假定是在不安全的通路上传输. 1.明文传输 被中间人C拦截下来,可以随意篡改A发送给B的消 ...

  2. Codeforces Round #403 (Div. 2, based on Technocup 2017 Finals) E Underground Lab

    地址:http://codeforces.com/contest/782/problem/E 题目: E. Underground Lab time limit per test 1 second m ...

  3. 为什么iterator，foreach遍历时不能进行remove操作?除了一种情况可以这样(特殊情况)？

    Exception in thread "main" java.util.ConcurrentModificationException 并发修改异常引发的思考! 1 foreac ...

  4. FileSystemWatcher监听文件是否有被修改

    作用:监听文件系统更改通知,并在目录或目录中的文件更改时引发事件. 需求:监听特定文件是否修改,然后做出相应的操作. 方法: ①利用一个线程,一直去查找该指定的文件是否有被修改,如果修改则操作特定步骤 ...

  5. 20145301实验五 Java网络编程及安全

    北京电子科技学院(BESTI)实验报告 课程:Java程序设计 班级:1453 指导教师:娄嘉鹏 实验日期:2016.05.06 18:30-21:30 实验名称:实验五 Java网络编程 实验内容 ...

  6. 20145211 《网络渗透》MS08_067安全漏洞

    20145211 <网络渗透>MS08_067安全漏洞 一.实验原理 ms08_067是服务器服务中一个秘密报告的漏洞,于2008年被发现.攻击者利用靶机默认开放的SMB服务的445端口, ...

  7. Calling Convention的总结

    因为经常需要和不同的Calling Convention打交道,前段时间整理了一下它们之间的区别,如下: 清理堆栈 参数压栈顺序 命名规则 (MSVC++) 备注 Cdecl 调用者 (Caller) ...

  8. 求CRC16校验

    unsigned short DialogSerial::crc_ccitt(unsigned char *q,int len){ unsigned short ccitt_table[256] = ...

  9. Excel导出失败的提示

    未处理System.InvalidCastException HResult=-2147467262 Message=无法将类型为“Microsoft.Office.Interop.Excel.App ...

  10. Ubuntu16.04 anaconda3 opencv已经安装，但是无法import的问题

    解决anaconda中已经安装了opencv3,但无法import的问题 你可能遇见的问题: ImportError: No module named cv2 ImportError: libz-a1 ...