欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！

您现在的位置是：首页 > IT编程

【HTML5】Canvas之globalCompositeOperation属性详解

程序员文章站 2022-05-04 14:08:58

globalCompositeOperation即Canvas中的合成操作。 1、source-over 这是默认值，他表示绘制的图形将画在现有画布之上 2、destination-over 这个操作的值与前一个值相反，所以现在目标绘制在源之上 3、source-atop 这个操作会将源绘制在目标之 ......

globalcompositeoperation即canvas中的合成操作。

1、source-over

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

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="http://www.jq22.com/jquery/jquery-2.1.1.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            var canvas=document.getelementbyid("mycanvas");
            var context=canvas.getcontext("2d");
            context.fillstyle="red";
            context.fillrect(50,50,100,100);
            context.globalcompositeoperation="source-over"
            context.fillstyle="green";
            context.fillrect(100,100,100,100);
        });
        </script>
    </head>
    <body>
        <canvas id="mycanvas" width="1000" height="1000"></canvas>
    </body>
</html>

【HTML5】Canvas之globalCompositeOperation属性详解

2、destination-over

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

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="http://www.jq22.com/jquery/jquery-2.1.1.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            var canvas=document.getelementbyid("mycanvas");
            var context=canvas.getcontext("2d");
            context.fillstyle="red";
            context.fillrect(50,50,100,100);
            context.globalcompositeoperation="destination-over"
            context.fillstyle="green";
            context.fillrect(100,100,100,100);
        });
        </script>
    </head>
    <body>
        <canvas id="mycanvas" width="1000" height="1000"></canvas>
    </body>
</html>

【HTML5】Canvas之globalCompositeOperation属性详解

3、source-atop

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

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="http://www.jq22.com/jquery/jquery-2.1.1.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            var canvas=document.getelementbyid("mycanvas");
            var context=canvas.getcontext("2d");
            context.fillstyle="red";
            context.fillrect(50,50,100,100);
            context.globalcompositeoperation="source-atop"
            context.fillstyle="green";
            context.fillrect(100,100,100,100);
        });
        </script>
    </head>
    <body>
        <canvas id="mycanvas" width="1000" height="1000"></canvas>
    </body>
</html>

【HTML5】Canvas之globalCompositeOperation属性详解

4、destination-atop

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

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="http://www.jq22.com/jquery/jquery-2.1.1.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            var canvas=document.getelementbyid("mycanvas");
            var context=canvas.getcontext("2d");
            context.fillstyle="red";
            context.fillrect(50,50,100,100);
            context.globalcompositeoperation="destination-atop"
            context.fillstyle="green";
            context.fillrect(100,100,100,100);
        });
        </script>
    </head>
    <body>
        <canvas id="mycanvas" width="1000" height="1000"></canvas>
    </body>
</html>

【HTML5】Canvas之globalCompositeOperation属性详解

5、source-in

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

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="http://www.jq22.com/jquery/jquery-2.1.1.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            var canvas=document.getelementbyid("mycanvas");
            var context=canvas.getcontext("2d");
            context.fillstyle="red";
            context.fillrect(50,50,100,100);
            context.globalcompositeoperation="source-in"
            context.fillstyle="green";
            context.fillrect(100,100,100,100);
        });
        </script>
    </head>
    <body>
        <canvas id="mycanvas" width="1000" height="1000"></canvas>
    </body>
</html>

【HTML5】Canvas之globalCompositeOperation属性详解

6、destination-in

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

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="http://www.jq22.com/jquery/jquery-2.1.1.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            var canvas=document.getelementbyid("mycanvas");
            var context=canvas.getcontext("2d");
            context.fillstyle="red";
            context.fillrect(50,50,100,100);
            context.globalcompositeoperation="destination-in"
            context.fillstyle="green";
            context.fillrect(100,100,100,100);
        });
        </script>
    </head>
    <body>
        <canvas id="mycanvas" width="1000" height="1000"></canvas>
    </body>
</html>

【HTML5】Canvas之globalCompositeOperation属性详解

7、source-out

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

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="http://www.jq22.com/jquery/jquery-2.1.1.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            var canvas=document.getelementbyid("mycanvas");
            var context=canvas.getcontext("2d");
            context.fillstyle="red";
            context.fillrect(50,50,100,100);
            context.globalcompositeoperation="source-out"
            context.fillstyle="green";
            context.fillrect(100,100,100,100);
        });
        </script>
    </head>
    <body>
        <canvas id="mycanvas" width="1000" height="1000"></canvas>
    </body>
</html>

【HTML5】Canvas之globalCompositeOperation属性详解

8、destination-out

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

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="http://www.jq22.com/jquery/jquery-2.1.1.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            var canvas=document.getelementbyid("mycanvas");
            var context=canvas.getcontext("2d");
            context.fillstyle="red";
            context.fillrect(50,50,100,100);
            context.globalcompositeoperation="destination-out"
            context.fillstyle="green";
            context.fillrect(100,100,100,100);
        });
        </script>
    </head>
    <body>
        <canvas id="mycanvas" width="1000" height="1000"></canvas>
    </body>
</html>

【HTML5】Canvas之globalCompositeOperation属性详解

9、lighter

这个值与顺序无关，如果源与目标重叠，就将两者的颜色值相加。得到的颜色值的最大取值为255。如下例中，红色的rgb值为rgb（255,0,0），绿色的rgb值为rgb（0,128,0），两者相加为rgb（255,128,0），即为图中橘色。如果一个rgb值为rgb（63,169,245），另一个rgb值为rgb（255,123,172），两者相加取最大值255，即rgb（255,255,255）为白色。

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="http://www.jq22.com/jquery/jquery-2.1.1.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            var canvas=document.getelementbyid("mycanvas");
            var context=canvas.getcontext("2d");
            context.fillstyle="red";
            context.fillrect(50,50,100,100);
            context.globalcompositeoperation="lighter"
            context.fillstyle="green";
            context.fillrect(100,100,100,100);
        });
        </script>
    </head>
    <body>
        <canvas id="mycanvas" width="1000" height="1000"></canvas>
    </body>
</html>

【HTML5】Canvas之globalCompositeOperation属性详解

10、copy

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

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="http://www.jq22.com/jquery/jquery-2.1.1.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            var canvas=document.getelementbyid("mycanvas");
            var context=canvas.getcontext("2d");
            context.fillstyle="red";
            context.fillrect(50,50,100,100);
            context.globalcompositeoperation="copy"
            context.fillstyle="green";
            context.fillrect(100,100,100,100);
        });
        </script>
    </head>
    <body>
        <canvas id="mycanvas" width="1000" height="1000"></canvas>
    </body>
</html>

【HTML5】Canvas之globalCompositeOperation属性详解

11、xor

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

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="http://www.jq22.com/jquery/jquery-2.1.1.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            var canvas=document.getelementbyid("mycanvas");
            var context=canvas.getcontext("2d");
            context.fillstyle="red";
            context.fillrect(50,50,100,100);
            context.globalcompositeoperation="xor"
            context.fillstyle="green";
            context.fillrect(100,100,100,100);
        });
        </script>
    </head>
    <body>
        <canvas id="mycanvas" width="1000" height="1000"></canvas>
    </body>
</html>

【HTML5】Canvas之globalCompositeOperation属性详解

注：图中“看不见的区域”为透明的源。

参考网站：https://blog.csdn.net/laijieyao/article/details/41862473

上一篇：获取地图的信息到input里

下一篇：大神说的一句话说清楚一个概念

推荐阅读