码迷,mamicode.com
首页 > Web开发 > 详细

canvas-arc.html

时间:2015-11-19 18:28:56      阅读:156      评论:0      收藏:0      [点我收藏+]

标签:

<!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>

 

canvas-arc.html

标签:

原文地址:http://www.cnblogs.com/cynthia-wuqian/p/4978305.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!