globalCompositeOperation 学习

时间：2021-10-06 08:35:03

globalCompositeOperation

globalCompositeOperation即Canvas中的合成操作。

1、source-over

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  7. <script type="text/javascript">
  8. $(document).ready(function(){
  9. var canvas=document.getElementById("myCanvas");
  10. var context=canvas.getContext("2d");
  11. context.fillStyle="rgb(63,169,245)";
  12. context.fillRect(50,50,100,100);
  13. context.globalCompositeOperation="source-over"
  14. context.fillStyle="rgb(255,123,172)";
  15. context.fillRect(100,100,100,100);
  16. });
  17. </script>
  18. </head>
  19. <body>
  20. <canvas id="myCanvas" width="1000px" height="1000px"></canvas>
  21. </body>
  22. </html>

globalCompositeOperation 学习

2、destination-over

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  7. <script type="text/javascript">
  8. $(document).ready(function(){
  9. var canvas=document.getElementById("myCanvas");
  10. var context=canvas.getContext("2d");
  11. context.fillStyle="rgb(63,169,245)";
  12. context.fillRect(50,50,100,100);
  13. context.globalCompositeOperation="destination-over"
  14. context.fillStyle="rgb(255,123,172)";
  15. context.fillRect(100,100,100,100);
  16. });
  17. </script>
  18. </head>
  19. <body>
  20. <canvas id="myCanvas" width="1000px" height="1000px"></canvas>
  21. </body>
  22. </html>

globalCompositeOperation 学习

3、source-atop

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  7. <script type="text/javascript">
  8. $(document).ready(function(){
  9. var canvas=document.getElementById("myCanvas");
  10. var context=canvas.getContext("2d");
  11. context.fillStyle="rgb(63,169,245)";
  12. context.fillRect(50,50,100,100);
  13. context.globalCompositeOperation="source-atop"
  14. context.fillStyle="rgb(255,123,172)";
  15. context.fillRect(100,100,100,100);
  16. });
  17. </script>
  18. </head>
  19. <body>
  20. <canvas id="myCanvas" width="1000px" height="1000px"></canvas>
  21. </body>
  22. </html>

globalCompositeOperation 学习

4、destination-atop

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  7. <script type="text/javascript">
  8. $(document).ready(function(){
  9. var canvas=document.getElementById("myCanvas");
  10. var context=canvas.getContext("2d");
  11. context.fillStyle="rgb(63,169,245)";
  12. context.fillRect(50,50,100,100);
  13. context.globalCompositeOperation="destination-atop"
  14. context.fillStyle="rgb(255,123,172)";
  15. context.fillRect(100,100,100,100);
  16. });
  17. </script>
  18. </head>
  19. <body>
  20. <canvas id="myCanvas" width="1000px" height="1000px"></canvas>
  21. </body>
  22. </html>

globalCompositeOperation 学习

5、source-in

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  7. <script type="text/javascript">
  8. $(document).ready(function(){
  9. var canvas=document.getElementById("myCanvas");
  10. var context=canvas.getContext("2d");
  11. context.fillStyle="rgb(63,169,245)";
  12. context.fillRect(50,50,100,100);
  13. context.globalCompositeOperation="source-in"
  14. context.fillStyle="rgb(255,123,172)";
  15. context.fillRect(100,100,100,100);
  16. });
  17. </script>
  18. </head>
  19. <body>
  20. <canvas id="myCanvas" width="1000px" height="1000px"></canvas>
  21. </body>
  22. </html>

globalCompositeOperation 学习

6、destination-in

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  7. <script type="text/javascript">
  8. $(document).ready(function(){
  9. var canvas=document.getElementById("myCanvas");
  10. var context=canvas.getContext("2d");
  11. context.fillStyle="rgb(63,169,245)";
  12. context.fillRect(50,50,100,100);
  13. context.globalCompositeOperation="destination-in"
  14. context.fillStyle="rgb(255,123,172)";
  15. context.fillRect(100,100,100,100);
  16. });
  17. </script>
  18. </head>
  19. <body>
  20. <canvas id="myCanvas" width="1000px" height="1000px"></canvas>
  21. </body>
  22. </html>

globalCompositeOperation 学习

7、source-out

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  7. <script type="text/javascript">
  8. $(document).ready(function(){
  9. var canvas=document.getElementById("myCanvas");
  10. var context=canvas.getContext("2d");
  11. context.fillStyle="rgb(63,169,245)";
  12. context.fillRect(50,50,100,100);
  13. context.globalCompositeOperation="source-out"
  14. context.fillStyle="rgb(255,123,172)";
  15. context.fillRect(100,100,100,100);
  16. });
  17. </script>
  18. </head>
  19. <body>
  20. <canvas id="myCanvas" width="1000px" height="1000px"></canvas>
  21. </body>
  22. </html>

globalCompositeOperation 学习

8、destination-out

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  7. <script type="text/javascript">
  8. $(document).ready(function(){
  9. var canvas=document.getElementById("myCanvas");
  10. var context=canvas.getContext("2d");
  11. context.fillStyle="rgb(63,169,245)";
  12. context.fillRect(50,50,100,100);
  13. context.globalCompositeOperation="destination-out"
  14. context.fillStyle="rgb(255,123,172)";
  15. context.fillRect(100,100,100,100);
  16. });
  17. </script>
  18. </head>
  19. <body>
  20. <canvas id="myCanvas" width="1000px" height="1000px"></canvas>
  21. </body>
  22. </html>

globalCompositeOperation 学习

9、lighter

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  7. <script type="text/javascript">
  8. $(document).ready(function(){
  9. var canvas=document.getElementById("myCanvas");
  10. var context=canvas.getContext("2d");
  11. context.fillStyle="rgb(63,169,245)";
  12. context.fillRect(50,50,100,100);
  13. context.globalCompositeOperation="lighter"
  14. context.fillStyle="rgb(255,123,172)";
  15. context.fillRect(100,100,100,100);
  16. });
  17. </script>
  18. </head>
  19. <body>
  20. <canvas id="myCanvas" width="1000px" height="1000px"></canvas>
  21. </body>
  22. </html>

globalCompositeOperation 学习

10、copy

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  7. <script type="text/javascript">
  8. $(document).ready(function(){
  9. var canvas=document.getElementById("myCanvas");
  10. var context=canvas.getContext("2d");
  11. context.fillStyle="rgb(63,169,245)";
  12. context.fillRect(50,50,100,100);
  13. context.globalCompositeOperation="copy"
  14. context.fillStyle="rgb(255,123,172)";
  15. context.fillRect(100,100,100,100);
  16. });
  17. </script>
  18. </head>
  19. <body>
  20. <canvas id="myCanvas" width="1000px" height="1000px"></canvas>
  21. </body>
  22. </html>

globalCompositeOperation 学习

11、xor

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  7. <script type="text/javascript">
  8. $(document).ready(function(){
  9. var canvas=document.getElementById("myCanvas");
  10. var context=canvas.getContext("2d");
  11. context.fillStyle="rgb(63,169,245)";
  12. context.fillRect(50,50,100,100);
  13. context.globalCompositeOperation="xor"
  14. context.fillStyle="rgb(255,123,172)";
  15. context.fillRect(100,100,100,100);
  16. });
  17. </script>
  18. </head>
  19. <body>
  20. <canvas id="myCanvas" width="1000px" height="1000px"></canvas>
  21. </body>
  22. </html>

globalCompositeOperation 学习

相关文章