HTML5之canvas-2圆 椭圆

Context.beginPath();

Context.arc(x,y,radius,startAngle,endAngle,anticlockwise);(for循环圆心、半径)

Context.closePath();

Context.fillStyle=’rgba(255,0,0,0.25)’

Context.fill()

ellipse(x,y,radiusX,radiusY,rotation,startAngle,endAngle,anticlockwise)

<head>
        <meta charset="UTF-8">
        <title>圆-椭圆</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    </head>

    <body>
        <canvas id="canvas" width="500" height="500"></canvas>
        <script type="text/javascript">
            var oCanvas = document.getElementById("canvas");
            var context = oCanvas.getContext("2d");

            context.fillStyle = "#ededed";
            context.fillRect(0, 0, 500, 500);

            //画圆第一个
            context.beginPath(); //开始圆
            context.arc(100, 400, 50, 0, 2 * Math.PI, true); //50半径,Math.PI圆的π,true顺时针
            context.closePath(); // 关闭圆，然后回到起点
            context.fillStyle = "rgba(255,0,0,0.5)"; //颜色，0.5透明度
            context.fill(); //填充这个圆

            for(var i = 0; i < 10; i++) {
                context.beginPath(); //开始圆
                context.arc(i*30, i*30, i*10, 0, 2 * Math.PI, true); //50半径,Math.PI圆的π,true顺时针
                context.closePath(); // 关闭圆，然后回到起点
                context.fillStyle = "rgba(255,0,0,0.5)"; //颜色
                context.fill(); //填充这个圆
            }
            
            //椭圆
            context.beginPath();
            context.ellipse(400, 100, 20, 40, 0.5, 0, 2*Math.PI, true);//radiusX:x方向上半径,radiusY：x方向上半径,0.5:rotation：旋转角度
            context.closePath();
            context.fillStyle = "#06e";
            context.fill();
        </script>

    </body>

</html>

 

posted @ 2016-09-05 22:46  李大白程序员  阅读(3293)  评论(0)  编辑  收藏  举报