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> ...
随机推荐
- 09 grep、正则表达式和sed
作业一:整理正则表达式博客 ^ 行首$ 行尾. 除了换行符以外的任意单个字符* 前导字符的零个或多个.* 所有字符[] 字符组内的任一字符[^] 对字符组内的每个字符取反(不匹配字符组内的每个字符)^ ...
- windows计划任务定时运行synctoy的坑
每次设置好synctoy之后,需要让synctoy运行一次,windows的计划任务才能成功执行,如果变更了synctoy的设置,而没有让synctoy成功执行过,windows计划任务将执行失败,坑 ...
- vuejs模仿实现一个电影分享类网站
前几天朋友发了一个电影分享类网站:http://dy.bingthink.top/ 感觉界面还挺好看的,所以打算用vuejs模仿写一个. 从后台转前端,要学习的东西挺多的,仅以此记录我的学习历程,闲的 ...
- TortoiseSVN_1.9.1.267_x64版本控制系统（针对Visual SVN Server）使用简单介绍
软件下载地址:TortoiseSVN(SVN客户端)64位 V1.9.1.267简体中文免费版 软件详细操作说明:TortoiseSVN使用说明书(超详细) 文章内容:此篇是简单记录如何从Visual ...
- Android-服务中监听电源键和Home键的广播、在锁屏下仍然工作的方法
Android-服务中监听电源键和Home键的广播 http://blog.csdn.net/u014657752/article/details/49512485 Android开发之如何监听让服 ...
- CentOS 6.3编译安装LAMP环境笔记
转载地址:http://www.jb51.net/article/54969.htm 最近抽空在虚拟机上测试成功了LAMP各个最新版本的整合编译安装,算是把之前的博文整合精简,以下内容均在CENTOS ...
- 20135302魏静静——linux课程第七周实验及总结
linux课程第七周实验及总结 实验及学习总结 1. 编译链接的过程和ELF可执行文件格式(以hello为例) GNU编译系统编译源码: 首先,运行C预处理器(cpp),将.c文件翻译成.i文件——g ...
- Excel水平线画不直，图形对象对不齐，怎么办
看够了千篇一律的数字报表,不妨添加些图形对象来调剂下,今天小编excel小课堂(ID:excel-xiaoketang 长按复制)给各位分享10个插入图形对象时简单实用的小技巧. 01课题 今天小编e ...
- Shell学习小结 - 深入认识变量
移动端访问不佳,请访问我的个人博客 变量的命名 对于初学者来说,可以简单的理解为,变量就是保存在计算机内存中的一系列的键值对. 列如: str="hello" 这里的str就是变量 ...
- 爬虫bs4
CSS 选择器:BeautifulSoup4 和 lxml 一样,Beautiful Soup 也是一个HTML/XML的解析器,主要的功能也是如何解析和提取 HTML/XML 数据. lxml 只会 ...