当两个或两个以上的图形存在重叠区域时，默认情况下一个图形画在前一个图像之上。通过指定图像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. vim初级命令

    命令 说明 光标移动   h 左 l(小写L) 右 j 下 k 上 w 移动到下一个单词 b 移动到上一个单词     插入   i 在当前光标处进行编辑 I(大写i) 在行首插入 A 在行末插入 a ...

  2. 微信小程序组件switch

    表单组件switch:官方文档 Demo Code: Page({ switch1Change: function (e){ console.log('switch1 发生 change 事件,携带值 ...

  3. Flask博客开发——自定义头像

    Flask Web开发一书中,使用了与个人邮箱绑定的Gravatar图形作为用户头像.Gravatar提供的头像比较简陋,而且可能由于网络问题无法生成头像.多数社交网站和博客提供用户自定义头像功能,因 ...

  4. javaScript动画3 事件对象event onmousemove

    事件对象的获取(event的获取) var event = event || window.event;(主要用这种) screenX.pageX和clientX的区别 PageY/pageX: 鼠标 ...

  5. HTTPS复习

    Https Https其实是两个协议,即HTTP协议和SSL协议,但是由于HTTP协议应用广泛,而且需要为其提供数据隐私保护,所以将HTTP协议与SSL协议结合.HTTP属于应用层,在远古时代,它只需 ...

  6. matlab基本操作总结

    1.clear;//清除工作平台变量2.close all;//关闭打开的图形窗口3.I = imread('C:\Users\dell\Desktop\rice.jpg');//读取图像,存储在I数 ...

  7. 微信小程序 drawImage 问题

    好久没写了,其实可写的还是挺多,主要还是懒吧... 最近公司项目使用小程序做序列帧动画,大概有 116 张图,共9.6M. 比较闲的日子里实验了一番,主要有以下几种方法, 1. css backgro ...

  8. 高可用Mysql架构_Mycat集群部署(HAProxy + 两台Mycat+Mysql双主双从）

    既然大家都知道了Mysql分布式在大型网站架构中的作用,在这里就不再阐述.本片博客文章是基于我曾经搭建过的一个Mysql集群基础上实现的,实现过双主热备.读写分离.分库分表. 博客链接:http:// ...

  9. Vue组件里面data为什么必须是个函数

    在创建或注册模板的时候,传入一个data属性用来绑定数据,但是在组件中,data必须是一个函数,而不能直接把对象赋值给它. export default { name:'app', data(){ r ...

  10. JavaScript的this指针到底指向哪？

    编程过程中,着实十分困扰this的指向性,经过查阅一番资料,终于搞清楚了,在这里总结一下,全文分为以下三个部分: 什么是this指针? this指针指向哪里? 何时使用this? 一 什么是this指 ...