globalCompositeOperation 学习

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>

globalCompositeOperation 学习的更多相关文章

Canvas学习：globalCompositeOperation详解
在默认情况之下,如果在Canvas之中将某个物体(源)绘制在另一个物体(目标)之上,那么浏览器就会简单地把源特体的图像叠放在目标物体图像上面. 简单点讲,在Canvas中,把图像源和目标图像,通过Ca ...
简单入门canvas - 通过刮奖效果来学习
一 .前言一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...
学习HTML5, Canvas及简单动画的使用
通过在CSDN中的一些简单课程学习,跟随老师联系,做了如下的月亮,太阳和地球的运动效果.纪录在文章中,用于下次使用. 准备工作如下: 1. 使用三张背景图片太阳月亮地球 2. 在HTML页面中定 ...
（私人收藏）[开发必备]HTML5最全快速查找离线手册（可查询可学习，带实例）
[开发必备]HTML5最全快速查找离线手册(可查询可学习,带实例) HTML5最全快速查找离线手册:https://pan.baidu.com/s/19seE8TJQSx4IsWgXtKQS0Aj9y ...
从直播编程到直播教育：LiveEdu.tv开启多元化的在线学习直播时代
2015年9月,一个叫Livecoding.tv的网站在互联网上引起了编程界的注意.缘于Pingwest品玩的一位编辑在上网时无意中发现了这个网站,并写了一篇文章<一个比直播睡觉更奇怪的网站:直 ...
Angular2学习笔记（1）
Angular2学习笔记(1) 1. 写在前面之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...
ABP入门系列（1）——学习Abp框架之实操演练
作为.Net工地搬砖长工一名,一直致力于挖坑(Bug)填坑(Debug),但技术却不见长进.也曾热情于新技术的学习,憧憬过成为技术大拿.从前端到后端,从bootstrap到javascript,从py ...
消息队列——RabbitMQ学习笔记
消息队列--RabbitMQ学习笔记 1. 写在前面昨天简单学习了一个消息队列项目--RabbitMQ,今天趁热打铁,将学到的东西记录下来. 学习的资料主要是官网给出的6个基本的消息发送/接收模型, ...
js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

随机推荐

MyEclipse中新建JSP（Advanced Template）文件时自动生成的
<meta http-equiv="pragma" content="no-cache"> <meta http-equiv="ca ...
Connect the Cities(prime)
Connect the Cities Time Limit : 2000/1000ms (Java/Other) Memory Limit : 32768/32768K (Java/Other) ...
C# 将XML转换成DataSet【转】
XmlDocument xml = new XmlDocument();xml.LoadXml(str); //str:具有xml格式的字符串 XmlNodeReader reader = new X ...
andengine游戏引擎总结基础篇
其他的游戏引擎知道的不是很对,不过相对于学java的童鞋们来说,那是个不错的选择啦,这个发动机咋样,google去吧.基础篇包括图片,字体,音效,数据读取,会了这点,就会做简单的小游戏啦对于游戏 ...
MySQL之终端(Terminal)管理MySQL(转)
前言:MySQL有很多的可视化管理工具,比如“mysql-workbench”和“sequel-pro-”. 现在我写MySQL的终端命令操作的文章,是想强化一下自己对于MySQL的理解,总会比使用图 ...
从客户端中检测到有潜在危险的Request.Form值的解决办法
http://www.pageadmin.net/article/20141016/935.html 如果你网站iis服务器asp.net采用了4.0的版本,则默认会阻止客户端的html内容提交,提交 ...
取得网站的IP 地址
select utl_inaddr.get_host_address('smtp.163.com') ipaddress from dual;
openwrt 家用备忘
hdu1251统计难题
Problem Description Ignatius最近遇到一个难题,老师交给他很多单词(只有小写字母组成,不会有重复的单词出现),现在老师要他统计出以某个字符串为前缀的单词数量(单词本身也是自己 ...
java之方法覆盖的坑
昨天写了个小例子,覆盖hashCode.equals进行集合set的一些特性测试,代码如下: class Test3 { public int c; public Test3(int c) {this ...

globalCompositeOperation 学习

globalCompositeOperation 学习的更多相关文章

随机推荐

热门专题