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>

时间： 2024-08-25 05:31:28

globalCompositeOperation 学习的相关文章

学习HTML5, Canvas及简单动画的使用

通过在CSDN中的一些简单课程学习,跟随老师联系,做了如下的月亮,太阳和地球的运动效果.纪录在文章中,用于下次使用. 准备工作如下: 1. 使用三张背景图片太阳月亮地球 2. 在HTML页面中定义一个CANVAS 1 <body> 2 <div style="background-color:green;text-align:center ;"> 3 <canvas id="c" style="background-co

[Canvas学习]变形

学习目的:使用变形:移动,旋转,缩放栅格,创造出更强大的图形. 状态的保存与恢复Saving and restoring state canvas的状态就是当前画面应用的所有样式和变形的一个快照,canvas的状态被存储在栈中,每当save方法被调用后,当前状态就会被推送到栈中保存. 状态信息包括:当前应用的变形: strokeStyle; fillStyle; globalAlpha; lineWidth; lineCap; lineJoin; miterLimit; shadowOffset

[Canvas学习]动画

学习目的:通过JavaScript操控<canvas>对象,实现交互动画. 动画的基本步骤 1. 清空canvas,使用clearRect方法 2. 保存canvas状态 3. 绘制动画图形 4. 恢复canvas状态操控动画Controlling an animation setInterval(function, delay) setTimeout(function, delay) requestAnimationFrame(callback) 太阳系运动的小例子 <canvas

HTML5 Canvas 学习笔记（canvas绘制线条、矩形、多边形、圆形、圆环、组合图形、文字、自定义图像）

学习资源:http://www.w3school.com.cn/html5/html_5_canvas.asp http://blog.csdn.net/clh604/article/details/8536059 http://www.jb51.net/html5/70307.html 一.对 canvas 的理解 <canvas>标签是 HTML5 中的新标签,像所有的 dom 对象一样它有自己本身的属性.方法和事件. canvas 是用来在网页上绘制图形的(我们通常称之为画布),

简单入门canvas - 通过刮奖效果来学习

一 .前言一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下,通过一个刮奖效果来学习. 二.canvas基础本文的目标是做一个刮奖效果,但是如果都不知道canvas是怎么回事,那么肯定也无法进行下去,所以先讲讲canvas基础吧. 首先,该怎么理解canvas,思来想去,最好的理解办法应该就是把canvas理解为一个空白的画纸,一张你可以在上面画画的纸. 然

Vue.js学习笔记：属性绑定 v-bind

v-bind 主要用于属性绑定,Vue官方提供了一个简写方式 :bind,例如:  <a v-bind:href="url"></a>  <a :href="url"></a> 绑定HTML Class 一.对象语法: 我们可以给v-bind:class 一个对象,以动态地切换class.注意:v-bind:class指令可以与普通的class特

Java多线程学习（吐血超详细总结）

林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 目录(?)[-] 一扩展javalangThread类二实现javalangRunnable接口三Thread和Runnable的区别四线程状态转换五线程调度六常用函数说明使用方式为什么要用join方法七常见线程名词解释八线程同步九线程数据传递本文主要讲了java中多线程的使用方法.线程同步.线程数据传递.线程状态及相应的一些线程函数用法.概述等. 首先讲一下进程和线程

微信小程序学习总结（2）------- 之for循环，绑定点击事件

最近公司有小程序的项目,本人有幸参与其中,一个项目做下来感觉受益匪浅,与大家做下分享,欢迎沟通交流互相学习. 先说一下此次项目本人体会较深的几个关键点:微信地图.用户静默授权.用户弹窗授权.微信充值等等. 言归正传,今天分享我遇到的关于wx:for循环绑定数据的一个tips: 1. 想必大家的都知道wx:for,如下就不用我啰嗦了: <view class="myNew" wx:for="{{list}}">{{item.title}}<view

【安全牛学习笔记】

弱点扫描 ╋━━━━━━━━━━━━━━━━━━━━╋ ┃发现弱点 ┃ ┃发现漏洞 ┃ ┃ 基于端口五福扫描结果版本信息(速度慢)┃ ┃ 搜索已公开的漏洞数据库(数量大) ┃ ┃ 使用弱点扫描器实现漏洞管理 ┃ ╋━━━━━━━━━━━━━━━━━━━━╋ [email protected]:~# searchsploit Usage: