canvas-arc.html

時間 2019-11-09

標籤 canvas arc.html arc html 欄目 HTML 简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
<canvas id="canvas" style="border: 1px #ddd solid;display: block;margin:0 auto"></canvas>
<script>
    window.onload = function(){
        var canvas = document.getElementById('canvas');

        canvas.width = 1024;
        canvas.height = 768;

        if(canvas.getContext('2d')){
            var context = canvas.getContext('2d');

            context.lineWidth = 5;
            context.strokeStyle = "#005588";
            
            for(var i=0;i<10;i++){
                context.beginPath();
                context.arc(50+i*100,50,40,0,2*Math.PI*(i+1)/10,false);
                context.closePath();

                context.stroke()
            }

            for(var i=0;i<10;i++){
                context.beginPath();
                context.arc(50+i*100,200,40,0,2*Math.PI*(i+1)/10,false);
                // context.closePath();

                context.stroke()
            }

            for(var i=0;i<10;i++){
                context.beginPath();
                context.arc(50+i*100,350,40,0,2*Math.PI*(i+1)/10,false);
                context.closePath();

                context.stroke();
                context.fillStyle ="#005588"
                context.fill();
            }
        

        }else{
            alert('當前遊覽器不支持Canvas，請更換遊覽器後再試！');
        }
    }
</script>
</body>

<script>
/*
  總結

  context.arc(
    （圓心x 圓心y  半徑r）
    centerx,centery,radius,

    （起始角度，終止角度）
    startingAngle,endingAngle,

    (false 順時針繪製)
    anticlockwise = false
  )
*/
</script>
</html>

更多相關文章...

相關標籤/搜索

HTML

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。