HTML5——Canvas_07之【图形组合】

最新推荐文章于 2024-07-19 14:10:02 发布

原创最新推荐文章于 2024-07-19 14:10:02 发布 · 300 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Canvas

Html5 同时被 2 个专栏收录

15 篇文章

订阅专栏

Canvas

9 篇文章

订阅专栏

本文介绍了一种使用HTML5 Canvas实现图形组合的方法，并通过调整globalCompositeOperation属性来改变图形间的重叠效果。示例中展示了如何绘制一个蓝色矩形与红色圆形，并设置了特定的混合模式。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>图形组合</title>
    
    <script>
       function draw(id)
       {
           var canvas=document.getElementById(id);
            if(canvas==null)
            {
                return false;
            }
            var context=canvas.getContext("2d");
            //重点
            var oprtns=new Array(
                "source-atop",
                "source-in",
                "source-out",
                "source-over",
                "destination-atop",
                "destination-in",
                "destination-out",
                "destination-over",
                "lighter",
                "copy",
                "xor"
             );

             i=8;
             //矩形
             content.fillStyle="blue";
             content.fillRext(10,10,60,60);
             content.globalCompositeOperation=oprtns[i];//重叠位置
             content.beginPath();
             //圆形
             content.fillStyle"red";
             content.arc(60,60,30,Math.PI*2,false);
             content.fill();


       }
    </script>
    
    
</head>

<body onload="draw("canvas");">
   <canvas id="canvas" width="500" height="500"></canvas>
</body>

</html>