重疊

<!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";
        //新圖覆蓋原圖，默認(rèn)值
//      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>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容