Home >Web Front-end >H5 Tutorial >How to draw arcs and circles with canvas

How to draw arcs and circles with canvas

php中世界最好的语言Original: 2018-03-14 09:47:293108browse

This time I will show you how to use canvas to draw arcs and circles, and what are the precautions for using canvas to draw arcs and circles. The following is a practical case. Let’s take a look.

The html file is as follows:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8"/>
    <title>Canvas绘制弧线和圆</title></head><body><style>
    #canvas{        border: 1px solid #aaa;        text-align: center;
    }</style><canvas id="canvas" width="800" height="800">
    当用户浏览器不支持Canvas,请更换浏览器重试！</canvas></body></html>

To draw an arc or circle, you need to use the arc method. First, let us understand this method:
context.arc( x,y,r ,sAngle,eAngle,counterclockwise);
This method has 6 parameters:

x: x-axis coordinate of the center of the circle

y: y-axis coordinate of the center of the circle

r: Radius

sAngle: arc starting position

eAngle: arc ending position

counterclockwise: optional parameter, default is false, specifies whether it should be counterclockwise or clockwisedrawing. false = clockwise, true = counterclockwise.
First, let us start drawing an arc. The code is as follows:

var canvas=document.getElementById("canvas");var context=canvas.getContext("2d");
context.lineWidth=5;
context.strokeStyle="blue"context.arc(300,300,200,0,2*Math.PI);
context.stroke();//画一个空心弧线
 context.fillStyle="red"
 context.fill();//收尾直接相连为一个封闭图形，以红色填充该图形

After drawing an arc, let us try to draw multiple arcs so that they become a circle. Directly enter the code:

window.onload= function () {        var canvas=document.getElementById("canvas");        if(canvas.getContext("2d")){            var context=canvas.getContext("2d");
            context.lineWidth=5;
            context.strokeStyle="red";          
            for(var i=0;i<10;i++){//绘制十个弧线，收尾封闭，没有填充色
                context.beginPath();
                context.arc(50+i*100,60,40,0,2*Math.PI*(i+1)/10);
                context.closePath();//使弧线封闭，形成一个闭合图形
                context.stroke();
            }            for(var i=0;i<10;i++){//绘制十个弧线，收尾不封闭，没有填充色
                context.beginPath();
                context.arc(50+i*100,180,40,0,2*Math.PI*(i+1)/10);
                context.stroke();
            }            for(var i=0;i<10;i++){//绘制十个弧线，收尾封闭且填充为默认色
                context.beginPath();
                context.arc(50+i*100,300,40,0,2*Math.PI*(i+1)/10,true);//逆时针绘制
                context.fill();
            }
        }else {
            alert("不支持canvas,请更换浏览器！")
        }
    };

How to draw arcs and circles with canvas

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

How to draw arcs and circles with canvas

Related articles