canvas-arc.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>

 

posted @ 2015-11-19 17:24  Cynthia娆墨旧染  阅读(546)  评论(0)    收藏  举报