【HTML5】Canvas之globalCompositeOperation属性详解

globalCompositeOperation即Canvas中的合成操作。

1、source-over

这是默认值，他表示绘制的图形将画在现有画布之上

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.fillStyle="rgb(63,169,245)";
context.fillRect(50,50,100,100);
context.globalCompositeOperation="source-over"
context.fillStyle="rgb(255,123,172)";
context.fillRect(100,100,100,100);
});
</script>
</head>
<body>
<canvas id="myCanvas" width="1000px" height="1000px"></canvas>
</body>
</html>

2、destination-over

这个操作的值与前一个值相反，所以现在目标绘制在源之上

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.fillStyle="rgb(63,169,245)";
context.fillRect(50,50,100,100);
context.globalCompositeOperation="destination-over"
context.fillStyle="rgb(255,123,172)";
context.fillRect(100,100,100,100);
});
</script>
</head>
<body>
<canvas id="myCanvas" width="1000px" height="1000px"></canvas>
</body>
</html>

3、source-atop

这个操作会将源绘制在目标之上，但是在重叠区域上两者都是不透明的。绘制在其他位置的目标是不透明的，但源是透明的。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.fillStyle="rgb(63,169,245)";
context.fillRect(50,50,100,100);
context.globalCompositeOperation="source-atop"
context.fillStyle="rgb(255,123,172)";
context.fillRect(100,100,100,100);
});
</script>
</head>
<body>
<canvas id="myCanvas" width="1000px" height="1000px"></canvas>
</body>
</html>

4、destination-atop

这个操作与source-atop相反，目标绘制在源之上

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.fillStyle="rgb(63,169,245)";
context.fillRect(50,50,100,100);
context.globalCompositeOperation="destination-atop"
context.fillStyle="rgb(255,123,172)";
context.fillRect(100,100,100,100);
});
</script>
</head>
<body>
<canvas id="myCanvas" width="1000px" height="1000px"></canvas>
</body>
</html>

5、source-in

在源于目标重叠的区域只绘制源，而不重叠的部分编程透明的。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.fillStyle="rgb(63,169,245)";
context.fillRect(50,50,100,100);
context.globalCompositeOperation="source-in"
context.fillStyle="rgb(255,123,172)";
context.fillRect(100,100,100,100);
});
</script>
</head>
<body>
<canvas id="myCanvas" width="1000px" height="1000px"></canvas>
</body>
</html>

6、destination-in

这个操作与source-in相反，在源于目标重叠的区域保留目标。而不重叠的部分都变成透明的。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.fillStyle="rgb(63,169,245)";
context.fillRect(50,50,100,100);
context.globalCompositeOperation="destination-in"
context.fillStyle="rgb(255,123,172)";
context.fillRect(100,100,100,100);
});
</script>
</head>
<body>
<canvas id="myCanvas" width="1000px" height="1000px"></canvas>
</body>
</html>

7、source-out

在与目标不重叠的区域上绘制源，其他部分都变成透明的。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.fillStyle="rgb(63,169,245)";
context.fillRect(50,50,100,100);
context.globalCompositeOperation="source-out"
context.fillStyle="rgb(255,123,172)";
context.fillRect(100,100,100,100);
});
</script>
</head>
<body>
<canvas id="myCanvas" width="1000px" height="1000px"></canvas>
</body>
</html>

8、destination-out

在与源不重叠的区域上保留目标。其他部分都变成透明的。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.fillStyle="rgb(63,169,245)";
context.fillRect(50,50,100,100);
context.globalCompositeOperation="destination-out"
context.fillStyle="rgb(255,123,172)";
context.fillRect(100,100,100,100);
});
</script>
</head>
<body>
<canvas id="myCanvas" width="1000px" height="1000px"></canvas>
</body>
</html>

9、lighter

这个值与顺序无关，如果源与目标重叠，就将两者的颜色值想家。得到的颜色值的最大取值为255，结果就为白色。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.fillStyle="rgb(63,169,245)";
context.fillRect(50,50,100,100);
context.globalCompositeOperation="lighter"
context.fillStyle="rgb(255,123,172)";
context.fillRect(100,100,100,100);
});
</script>
</head>
<body>
<canvas id="myCanvas" width="1000px" height="1000px"></canvas>
</body>
</html>

10、copy

这个值与顺序无关，只绘制源，覆盖掉目标。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.fillStyle="rgb(63,169,245)";
context.fillRect(50,50,100,100);
context.globalCompositeOperation="copy"
context.fillStyle="rgb(255,123,172)";
context.fillRect(100,100,100,100);
});
</script>
</head>
<body>
<canvas id="myCanvas" width="1000px" height="1000px"></canvas>
</body>
</html>

11、xor

这个值与顺序无关，只绘制出不重叠的源与目标区域。所有重叠的部分都变成透明的

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.fillStyle="rgb(63,169,245)";
context.fillRect(50,50,100,100);
context.globalCompositeOperation="xor"
context.fillStyle="rgb(255,123,172)";
context.fillRect(100,100,100,100);
});
</script>
</head>
<body>
<canvas id="myCanvas" width="1000px" height="1000px"></canvas>
</body>
</html>

【HTML5】Canvas之globalCompositeOperation属性详解的更多相关文章

[js高手之路] html5 canvas系列教程 - 状态详解(save与restore)
本文内容与路径([js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解)是canvas中比较重要的概念.掌握理解他们是做出复杂canvas动 ...
html5 Canvas绘制图形入门详解
html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...
HTML5 Canvas绚丽的小球详解
实例说明: 实例使用HTML5+CSS+JavaScript实现小球的运动效果掌握Canvas的基本用法技术要点: 从需求出发分析Demo要实现的功能擅于使用HTML5 Canvas 参考手册 ...
HTML重要标签及属性详解
我学习前端的时间不长,短短1个月而已,只学了些HTML5和CSS3还有少许javascript,另外还有网页布局等等辅助性书籍,我在模仿网页以及完成百度前端技术学院的任务过程中发现了我容易忘记的标签以 ...
android:exported 属性详解
属性详解标签: android 2015-06-11 17:47 27940人阅读评论(7) 收藏举报分类: Android(95) 项目点滴(25) 昨天在用360扫描应用漏洞时,扫描结果, ...
OutputCache属性详解（一）一Duration、VaryByParam
目录 OutputCache概念学习 OutputCache属性详解(一) OutputCache属性详解(二) OutputCache属性详解(三) OutputCache属性详解(四)— SqlD ...
OutputCache属性详解（二）一 Location
目录 OutputCache概念学习 OutputCache属性详解(一) OutputCache属性详解(二) OutputCache属性详解(三) OutputCache属性详解(四)— SqlD ...
OutputCache属性详解（三）— VaryByHeader,VaryByCustom
目录 OutputCache概念学习 OutputCache属性详解(一) OutputCache属性详解(二) OutputCache属性详解(三) OutputCache属性详解(四)— SqlD ...
OutputCache属性详解（四）— SqlDependency
目录 OutputCache概念学习 OutputCache属性详解(一) OutputCache属性详解(二) OutputCache属性详解(三) OutputCache属性详解(四)— SqlD ...

随机推荐

关于C++对汉字拼音的处理——终结篇(补充)
需要补充的有三个方面: 1.新华字典数据获取方法1: 点击这里 2.新华字典数据获取方法2: 点击这里 3.比较稳定的其它的汉字转拼音的方法: 点击这里 *注:由于内容较多3个部分分文3篇博客进行分别 ...
OpenJudge 2694 逆波兰表达式
1.链接地址: http://bailian.openjudge.cn/practice/2694/ 2.题目: 总时间限制: 1000ms 内存限制: 65536kB 描述逆波兰表达式是一种把运算 ...
mysql主配置文件my.cnf详细说明
MySQL配置文件my.cnf 例子最详细翻译,可以保存做笔记用[转载]#BEGIN CONFIG INFO#DESCR: 4GB RAM, 只使用InnoDB, ACID, 少量的连接, 队列负载大 ...
【转】mysql in语句优化
mysql会对sql语句做优化, in 后面的条件不超过一定数量仍然会使用索引.mysql 会根据索引长度和in后面条件数量判断是否使用索引. 另外,如果是in后面是子查询,则不会使用索引. 一个文章 ...
Markdown：纯文本进行网页排版的简单标记语言
Markdown http://daringfireball.net/projects/markdown/ 2016-08-03 Markdown是一种标记语言,对纯文本使用简单的标记符号进行网页格式 ...
C语言到底怎么了？
自2015年11月开始,所有C语言系列都呈现出衰落之势.在超过15年的时间里,C语言在编程语言排行榜中的占比一直有15%-20%,但今年却突然急转直下,目前占比已不足10%,且目前看来回天乏力. 那么 ...
微信公众号－5秒内不回复测试并处理方案，顺便复习php 时间执行
在index.php中 file_put_contents('has_request.txt','请求时间:'.date('YmdHis')."\n",FILE_APPEND); ...
Python 中模块间全局变量的使用上的注意
最近用Python写代码,需要用到模块间的全局变量. 网上四处搜索,发现普遍做法是把全局变量放到一个独立的模块中,使用时,导入此全局变量模块即可. 但是在实际使用过程中发现了些小问题:在使用如下代码导 ...
LogBack入数据库重写
项目需要:将info以及error的日志信息写入到数据库中:同时所有的日志都要写入到日志文件中. 可以封装一下,在基类的logError/logInfo中调用了log.error()以及log.inf ...
sencha touch
download http://www.sencha.com/products/touch/thank-you/ Developer Center http://developer.sencha.co ...

【HTML5】Canvas之globalCompositeOperation属性详解

【HTML5】Canvas之globalCompositeOperation属性详解的更多相关文章

随机推荐

热门专题