HTML5 Canvas使用路徑——繪製圓形

乞力馬紮羅的雪CYF發表於2015-09-28
HTMLCanvas

HTML實現程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <script>
        function draw(id){

            var canvas = document.getElementById("canvas");
            if(canvas == null){

                return false;
            }

            var context = canvas.getContext("2d");
            context.fillStyle = "#eeeeef";
            context.fillRect(0,0,600,700);
            for(var i = 0;i <= 10;i++){

                context.beginPath();
                context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
                context.closePath();
                context.fillStyle = "rgba(255,0,0,0.25)";
                context.fill();

            }

        }
    </script>



</head>
<body onload="draw('canvas')">

    <canvas id="canvas" width="600px" height="700"></canvas>


</body>
</html>

實現效果如下：

.


github主頁：https://github.com/chenyufeng1991  。歡迎大家訪問！

相關文章