canvas图形的组合与裁切

当两个或两个以上的图形存在重叠区域时，默认情况下一个图形画在前一个图像之上。通过指定图像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图形的组合与裁切的更多相关文章

[html] 学习笔记-Canvas图形绘制处理
使用Canvas API 可以将一个图形重叠绘制在另外一个图形上,也可以给图形添加阴影效果. 1.Canvas 图形组合通过 globalCompositeOperation = 属性来指定重叠效 ...
canvas图形组合
代码: 1 /** 2 * Created by Administrator on 2016/1/27. 3 */ 4 function draw (id){ 5 var canvas = docum ...
Canvas 图形组合方式
/** * 图形组合 */ function initDemo5() { var canvas = document.getElementById("demo5"); if (!c ...
canvas图形绘制
前面的话前面分别介绍了canvas的基础用法和进阶用法,本文将使用canvas的各种语法进行图形绘制绘制线条 [绘制线条] 下面来尝试绘制一段线条 <canvas id="draw ...
HTML5 CANVAS 实现图片压缩和裁切
原文地址:http://leonshi.com/2015/10/31/html5-canvas-image-compress-crop/?utm_source=tuicool&utm_medi ...
canvas图形编辑器
原文地址:http://jeffzhong.space/2017/11/02/drawboard/ 使用canvas进行开发项目,我们离不开各种线段,曲线,图形,但每次都必须用代码一步一步的实现.有没 ...
小强的HTML5移动开发之路（6）——Canvas图形绘制基础
来自:http://blog.csdn.net/dawanganban/article/details/17686039 在前面提到Canvas是HTML5中一个重要特点,canvas功能非常强大,用 ...
WPF 中Canvas图形移动、缩放代码
从Flash转C#,很多内容一知半解,边摸索边前进,代码粗糙,权当留个脚印. 只是想得到一个基础的移动和缩放功能的界面,找了很久都是画线.画矩形等基础形状的代码,移动和缩放说的并不清晰,只能自己努力来 ...
HTML5 Canvas ( 图形的透明度和遮盖 ) globalAlpha, globalCompositeOperation
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

delphi程序中定义热键
delphi程序中定义热键用到3个API函数 BOOL RegisterHotKey ( HWND hWnd, //响应该热键的窗口句 ...
java中全面的单例模式多种实现方式总结
单例模式的思想想整理一些 java 并发相关的知识,不知道从哪开始,想起了单例模式中要考虑的线程安全,就从单例模式开始吧. 以前写过单例模式,这里再重新汇总补充整理一下,单例模式的多种实现. 单例模 ...
从u-boot的编译结果中提取include目录
ac@DESKTOP-BJ1MJGM:~/u-boot-2019.01/spl$ arm-linux-gnueabihf-objdump -g u-boot-spl | awk '/The Direc ...
javascript 理解对象--- 定义多个属性和读取属性的特性
一定义多个属性 ECMAScript5 定义了一个Object.defineProperties()方法,用于定义多个属性.此方法接受两个对象参数: 第一个对象:要添加或修改其属性的对象第二个对象 ...
Selenium+Python定位实例
常见的定位方式参见:http://www.cnblogs.com/ranxf/p/7928732.html 1.ID定位(find_element_by_id) <input class=&qu ...
微服务—分布式服务追踪sleuth和zipkin
随着业务的发展,系统规模也会越来越大,各微服务间的调用关系也越来越错综复杂. 通常一个客户端发起的请求在后端系统中会经过多个不同的微服务调用来协同产生最后的请求结果, 在复杂的微服务架构系统中,几乎每 ...
Web安全学习笔记之Nmap命令参考指南
最近研究Nmap,命令太多,详细还是需要参考官方文档(可选中文) 本文转载在网络技术中,端口(Port)包括逻辑端口和物理端口两种类型.物理端口指的是物理存在的端口,如ADSL Modem.集线器. ...
如何用纯 CSS 创作一只徘徊的果冻怪兽
效果预览在线演示按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VdOKQG 可交互视频 ...
手动加载B120i/B320i阵列卡驱动安装RHEL7.0
实验设备: Micro server Gen8(B120i) DL360e Gen8(B320i) 目录一．前期准备... 1 二．加载阵列卡驱动... 11 三．手动分区... 21 四．安装设置 ...
openwrt的编译系统是如何制作根文件系统的
答:分析以下makefile即可获取整个过程以nxp layerscape系统的编译过程为例 1.分析target/linux/layerscape/image/Makefile的最后一句,这是一个 ...

canvas图形的组合与裁切

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

随机推荐

热门专题