当两个或两个以上的图形存在重叠区域时，默认情况下一个图形画在前一个图像之上。通过指定图像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. jenkins slave启动报错：hudson.util.IOException2: Slave JVM has terminated. Exit code=126

    添加mac slave节点报错如下:Expanded the channel window size to 4MB [11/07/14 19:11:54] [SSH] Starting slave p ...

  2. 接口返回值结果转换成JSON

    接口返回值结果转换成JSON,具体的方法如下: public static String GetJsonValue(String result,int index,String key){ int i ...

  3. debian 如何切换为root用户

    debian 如何切换为root用户   debian 如何切换为root用户 sudo su 输入命令后提示输入密码,输入密码切换为root用户

  4. android 自定义View 对话框

    package com.example.dialog5; import android.os.Bundle;import android.app.Activity;import android.app ...

  5. 手写Bind

    Function.prototype.bind2 = function(context){ var self = this; var args = [].slice.call(arguments,1) ...

  6. iOS开发之NSUserDefaults

    在ios中偏好设置保存用户配置的对象 //NSUserDefaults读取 //获取标准函数对象 //通过对象获取名称下NSMutableDictionary数据 NSUserDefaults *de ...

  7. 基于session和token的身份认证方案

    一.基于session的身份认证方案 1.方案图示 2.比较通用的鉴权流程实现如下: 在整个流程中有两个拦截器. 第一个拦截器AuthInteceptor是为了每一次的请求的时候都先去session中 ...

  8. springboot 监控

    一.什么是spring-boot-starter-actuator(doc) springboot项目如何检查配置与运行状态呢?官方提供了一些接口可以查看springboot项目运行情况,只需要导入s ...

  9. 照着官网来安装openstack pike之创建并启动instance

    有了之前组件(keystone.glance.nova.neutron)的安装后,那么就可以在命令行创建并启动instance了 照着官网来安装openstack pike之environment设置 ...

  10. Ubuntu16.04多个版本GCC编译器的安装和切换【转】

    本文转载自:https://www.cnblogs.com/uestc-mm/p/7511063.html 这几天在配置交叉编译ARM开发板的linux内核的过程中碰到了很多问题,其中包括了GCC版本 ...