重叠

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #myCanvas{
                border: 10px solid red;
            }
        </style>
    </head>
    <body>
        <canvas id="myCanvas" width="600" height="600"></canvas>
    </body>
    <script type="text/javascript">
        var myCanvas = document.getElementById("myCanvas");

        var context = myCanvas.getContext("2d");
        var deg = Math.PI/180;
        
        function yuan (x,y,r,color) {
            this.x=x;
            this.y=y;
            this.r=r;
            this.color = color;
            this.hua = function () {
                context.beginPath();
                context.arc(x,y,r,0,360*deg,false);
                context.fillStyle = color;
                context.fill();
            }
        }
        var kk = new yuan(300,300,100,"red");
        kk.hua();
        //destination-over原图在新图的上面
//      context.globalCompositeOperation = "destination-over";
        //新图覆盖原图，默认值
//      context.globalCompositeOperation = "source-over";
        //destination-in 保留原图重合的部分，其他透明
        //source-in 保留新图重合的部分，其他透明
        //destination-out 保留原图不重合的部分，其他透明
        //source-out 保留新图不重合的部分，其他透明
        //destination-atop 保留原图重合部分和新图未重合部分
        //source-atop 保留新图重合部分和新图未重合部分
        //lighter 重合部分颜色叠加
        //copy 只保留新图
        context.globalCompositeOperation = "lighter";
        var greenOne = new yuan(200,300,100,"green");
        greenOne.hua();
        
        
    </script>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容