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> ...
随机推荐
- JQueryEasyUI easyui-combobox 单击文本区域显示下拉菜单
//单击内容框弹出下拉菜单 $(".combo").click(function (e) { if (e.target.className == 'combo-text valid ...
- 对Java CAS的一些了解（正在整理学习中）
①引言 在JDK 5之前Java语言是靠synchronized关键字保证同步的,这会导致有锁 锁机制存在以下问题: (1)在多线程竞争下,加锁.释放锁会导致比较多的上下文切换和调度延时,引起性能问题 ...
- zookeeper No route to host
2017-10-12 07:25:59,270 [myid:1] - WARN [QuorumPeer[myid=1]/0:0:0:0:0:0:0:0:2181:QuorumCnxManager@36 ...
- python 实现3-2 问候语: 继续使用练习 3-1 中的列表,但不打印每个朋友的姓名,而为每人打印一条消息。每条消息都包含相同的问候语,但抬头为相应朋友的姓名。
names = ['linda', 'battile', 'emly'] print(names[0].title() + " " + "good moning!&quo ...
- PHP分页及原理
在看本文之前,请确保你已掌握了PHP的一些知识以及MYSQL的查询操作基础哦. 作为一个Web程序,经常要和不计其数的数据打交道,比如会员的数据,文章数据,假如只有几十个会员那很好办,在一页显示就可以 ...
- springboot 监控
一.什么是spring-boot-starter-actuator(doc) springboot项目如何检查配置与运行状态呢?官方提供了一些接口可以查看springboot项目运行情况,只需要导入s ...
- Windows打开软件老是弹出无法验证发布者
使用组策略管理器 gpedit.msc 用户配置-管理模板-Windows组件-附件管理器-中等风险文件类型的包含列表 .exe;.cmd;.bat;.js即可
- 20145329《Java程序设计》第八周学习总结
教材学习内容总结 日志 1.java.util.logging包提供了日志功能相关类与接口. 2.使用日志的起点是Logger类,Longer类的构造函数标示为protected,不同包的类药取得Lo ...
- flex 的总结
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【前端】display: box布局教程 [转]
css display:box 新属性 一.display:box; 在元素上设置该属性,可使其子代排列在同一水平上,类似display:inline-block;. 二.可在其子代设置如下属性 ...