zoukankan      html  css  js  c++  java

  • 【HTML5】Canvas之globalCompositeOperation属性详解

    globalCompositeOperation即Canvas中的合成操作。

    1、source-over

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

    [html] view plaincopy在CODE上查看代码片派生到我的代码片
     
    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>  



    2、destination-over

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

    [html] view plaincopy在CODE上查看代码片派生到我的代码片
     
    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>  



    3、source-atop

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

    [html] view plaincopy在CODE上查看代码片派生到我的代码片
     
    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>  



    4、destination-atop

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

    [html] view plaincopy在CODE上查看代码片派生到我的代码片
     
    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>  

    5、source-in

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

    [html] view plaincopy在CODE上查看代码片派生到我的代码片
     
    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>  



    6、destination-in

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

    [html] view plaincopy在CODE上查看代码片派生到我的代码片
     
    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>  



    7、source-out

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

    [html] view plaincopy在CODE上查看代码片派生到我的代码片
     
    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>  

    8、destination-out

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

    [html] view plaincopy在CODE上查看代码片派生到我的代码片
     
    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>  

    9、lighter

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

    [html] view plaincopy在CODE上查看代码片派生到我的代码片
     
    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>  

    10、copy

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

    [html] view plaincopy在CODE上查看代码片派生到我的代码片
     
    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>  

    11、xor

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

    [html] view plaincopy在CODE上查看代码片派生到我的代码片
     
    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>  
  • 相关阅读:
    Delphi 正则表达式之TPerlRegEx 类的属性与方法(2): 关于子表达式
    Delphi 正则表达式语法(7): 匹配转义字符
    Delphi 正则表达式之TPerlRegEx 类的属性与方法(1): 查找
    Delphi 正则表达式语法(5): 边界
    Delphi 正则表达式语法(8): 引用子表达式 也叫反向引用
    Delphi 正则表达式语法(3): 匹配范围
    Delphi 正则表达式语法(6): 贪婪匹配与非贪婪匹配
    Delphi 正则表达式语法(9): 临界匹配 也叫"预搜索"与"反向预搜索"
    Delphi 正则表达式语法(10): 选项
    善用 Web 调试代理工具
  • 原文地址：https://www.cnblogs.com/xuan52rock/p/4643259.html
Copyright © 2011-2022 走看看