当两个或两个以上的图形存在重叠区域时，默认情况下一个图形画在前一个图像之上。通过指定图像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. npm使用淘宝镜像

    淘宝 npm 地址: http://npm.taobao.org/ 如何使用 有很多方法来配置npm的registry地址,下面根据不同情境列出几种比较常用的方法.以淘宝npm镜像举例: 1.临时使用 ...

  2. DataTable转换成IList

    //文章出处: http://www.cnblogs.com/hlxs/archive/2011/05/09/2087976.html DataTable转换成IList 在用C#作开发的时候经常要把 ...

  3. Java Hashtable详细介绍和使用示例

    ①对Hashtable有个整体认识 和HashMap一样,Hashtable 也是一个散列表,它存储的内容是键值对(key-value)映射.Hashtable 继承于Dictionary,实现了Ma ...

  4. Java线程常用方法汇总

    1.sleep() 使当前线程(即调用该方法的线程)暂停执行一段时间,让其他线程有机会继续执行,但它并不释放对象锁.也就是说如果有synchronized同步快,其他线程仍然不能访问共享数据.注意该方 ...

  5. iOS & Android APP crash保护机制

    一.背景 还在码代码,码好再BB... 二.思路 三.解决方案 四.注意点 五.开源项目 github:https://github.com/qiyer/QYCrashProtector

  6. svn不提交.net项目中的bin

    1 选中 bin->右击->tortoiseSVN->add to ignore list->选择第二个 2 提交 , 服务器上就没有bin目录了.

  7. Python3.x：将数据下载到xls时候用xml格式保存一份读取内容

    Python3.x:将数据下载到xls时候用xml格式保存一份读取内容 核心代码: import json import xml.dom.minidom from urllib import requ ...

  8. [pixhawk笔记]11-Windows下PX4代码查看

    由于项目需要做基于Simulink的PX4二次开发,在Windows下面做,所以需要在Windows下查看PX4的代码,故写该文档,记录环境安装和配置过程.按照该网页安装工具链:Windows Ins ...

  9. 如何用纯 CSS 创作单元素点阵 loader

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览.https://codepen.io/comehope/pen/YvBvBr 可交互视频 此 ...

  10. servlet类与Spring Controller类的关系

    以前的java web项目,需要在web.xml中定义servlet,对应不同的请求,而在spring项目中,我们用controller定义了各种各样的servlet(当然不包括DispatcherS ...