<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>圓環(huán)</title>
    <style>
        body { background: url("./images/bg3.jpg") repeat; }
        #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
    </style>
</head>
<body>
<div id="canvas-warp">
    <canvas id="canvas">
        你的瀏覽器居然不支持Canvas？！趕快換一個吧！！
    </canvas>
</div>

<script>
    window.onload = function(){
        var canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 600;
        var context = canvas.getContext("2d");
        context.fillStyle = "#FFF";
        context.fillRect(0,0,800,600);

        context.shadowColor = "#545454";
        context.shadowOffsetX = 5;
        context.shadowOffsetY = 5;
        context.shadowBlur = 2;

        context.arc(400, 300, 200, 0, Math.PI * 2 ,false);
        context.arc(400, 300, 230, 0, Math.PI * 2 ,true);
        context.fillStyle = "#00AAAA";
        context.fill();
    };
</script>
</body>
</html>

演示 21-1

運行結果：

繪制圓環(huán)

結合我們上一節(jié)學到了陰影效果，這個圓環(huán)看上去是不是特別的有立體感？

鏤空剪紙效果

接下來，我們利用非零環(huán)繞原則和陰影來繪制一個鏤空的剪紙效果。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>鏤空剪紙效果</title>
    <style>
        body { background: url("./images/bg3.jpg") repeat; }
        #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
    </style>
</head>
<body>
<div id="canvas-warp">
    <canvas id="canvas">
        你的瀏覽器居然不支持Canvas？！趕快換一個吧！！
    </canvas>
</div>

<script>
    window.onload = function(){
        var canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 600;
        var context = canvas.getContext("2d");
        context.fillStyle = "#FFF";
        context.fillRect(0,0,800,600);

        context.beginPath();
        context.rect(200,100,400,400);
        drawPathRect(context, 250, 150, 300, 150);
        drawPathTriangle(context, 345, 350, 420, 450, 270, 450);
        context.arc(500, 400, 50, 0, Math.PI * 2, true);
        context.closePath();

        context.fillStyle = "#058";
        context.shadowColor = "gray";
        context.shadowOffsetX = 10;
        context.shadowOffsetY = 10;
        context.shadowBlur = 10;
        context.fill();

    };

    //逆時針繪制矩形
    function drawPathRect(cxt, x, y, w, h){
        /**
         * 這里不能使用beginPath和closePath，
         * 不然就不屬于子路徑而是另一個全新的路徑，
         * 無法使用非零環(huán)繞原則
         */
        cxt.moveTo(x, y);
        cxt.lineTo(x, y + h);
        cxt.lineTo(x + w, y + h);
        cxt.lineTo(x + w, y);
        cxt.lineTo(x, y);

    }

    //逆時針繪制三角形
    function drawPathTriangle(cxt, x1, y1, x2, y2, x3, y3){
        cxt.moveTo(x1,y1);
        cxt.lineTo(x3,y3);
        cxt.lineTo(x2,y2);
        cxt.lineTo(x1,y1);
    }

</script>
</body>
</html>

演示 21-3

運行結果：

鏤空剪紙效果

這里手動繪制矩形的原因是我們想要得到逆時針路徑的矩形，而且API提供的rect()方法繪制是順時針矩形。另外，需要注意的是，這個剪紙是一個圖形，一個路徑。不能在繪制鏤空三角形和繪制鏤空矩形的方法里使用beginPath()和closePath()，不然它們就會是新的路徑、新的圖形，而不是剪紙的子路徑、子圖形，就無法使用非零環(huán)繞原則。

好了，這一節(jié)的內容就到這里，內容相對來說還是比較簡單實用的。下一節(jié)就是Canvas API的最后一節(jié)了，大家已經(jīng)掌握了這么多的繪制方法，是不是躍躍欲試了呢？那么，就揚起手中的筆，繪出自己的藝術家之魂吧~

上一篇：Ch3 從線段開始下一篇：Ch2 開始前的準備

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

Ch21 非零環(huán)繞原則

路徑方向與非零環(huán)繞原則

繪制圓環(huán)

鏤空剪紙效果