globalCompositeOperation即Canvas中的合成操作。
1、source-over
这是默认值,他表示绘制的图形将画在现有画布之上
[html]
- <!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>
<!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
这个操作的值与前一个值相反,所以现在目标绘制在源之上
[html]
- <!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>
<!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
这个操作会将源绘制在目标之上,但是在重叠区域上两者都是不透明的。绘制在其他位置的目标是不透明的,但源是透明的。
[html]
- <!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>
<!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相反,目标绘制在源之上
[html]
- <!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>
<!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
在源于目标重叠的区域只绘制源,而不重叠的部分编程透明的。
[html]
- <!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>
<!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相反,在源于目标重叠的区域保留目标。而不重叠的部分都变成透明的。
[html]
- <!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>
<!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
在与目标不重叠的区域上绘制源,其他部分都变成透明的。
[html]
- <!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>
<!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
在与源不重叠的区域上保留目标。其他部分都变成透明的。
[html]
- <!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>
<!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,结果就为白色。
[html]
- <!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>
<!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
这个值与顺序无关,只绘制源,覆盖掉目标。
[html]
- <!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>
<!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
这个值与顺序无关,只绘制出不重叠的源与目标区域。所有重叠的部分都变成透明的
[html]
- <!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>
<!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>
最新回复 (0)
全部楼主
发新帖
主题数 263 |
帖子数 79 |
注册排名 1 |
作者最近主题:
- mysql 按照 id in () 排序
- TexturePacker 6.0.2 开启无限试用
- video标签播放本地视频只有声音没有图像的解决办法-视频转码格式工厂或FFmpeg
- CodeIgniter3 接口使用 post 方法传递 json 数据
- 关于使用Git或composer出现“git Failed to connect to 127.0.0.1 port xxxx: Connection refused”的问题解决方案
- 在react 中 实现 nextTick 功能,解决DOM渲染问题!
- 前端经典面试题目全集
- 微信公众号自定义菜单失效,公众号菜单无法设置的解决方法
- webstorm下怎么禁止整个项目中typescript编译出的js和jsmap文件?
- vscode编辑 tsx 文件 报错 Its type 'CompoundedComponent' is not a valid JSX element type.ts