Canvas draw circle or arc

In html5, CanvasRenderingContext2Dobjects also provide methods for drawing circles or arcs. Please refer to the following attributes and methods:

arc(x, y, radius, startRad, endRad, anticlockwise)

Draw an arc on the canvas with the coordinate point (x,y) as the center and the radius as radius . The starting arc of this arc is startRad , and the ending arc is endRad . The radian here is calculated based on the positive direction of the x-axis (three o'clock on the clock) and the angle of clockwise rotation. anticlockwise Indicates whether to start drawing in a counterclockwise or clockwise direction, if true it means counterclockwise, if false it means clockwise. anticlockwise The parameter is optional and defaults to false clockwise.

The radian calculation method in the arc() method

arcTo(x1, y1, x2, y2, radius)

This method will use the angle formed by the current endpoint, endpoint 1 (x1,y1) and endpoint 2 (x2,y2) , and then draw an arc on radius a . In general, the starting position of the drawn arc is the current endpoint, the ending position is endpoint 2, and the direction of drawing the arc is the direction of the shortest arc connecting the two endpoints. Additionally, if the current endpoint is not on the specified circle, this method will also draw a line from the current endpoint to the arc's start point.

After understanding the above APIs for drawing arcs on canvas, let's take a look at how to use them to arc()draw arcs. We already know that arc()the 4th and 5th parameters received represent the starting and ending radians of the arc drawn. I believe that all readers have learned radians in school mathematics or geometry courses. The radian is a unit of angle. An arc whose length is equal to its radius corresponds to a central angle of 1 radian. We also know that ra circle with a radius of , has a perimeter of 2πr. With this knowledge of geometry, we can use arc()methods to draw arcs.

Draw arcs using canvas

Now, let's draw a 1/4 arc of a circle with a radius of 50px

<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>HTML5 Canvas drawing arc introduction example</title>
</head>
<body>
<!-- Add canvas tag with red border for easy viewing on the page-->
<canvasid="myCanvas"width="400px"height="300px"style="border:1px solid red;">
Your browser does not support the canvas tag.
</canvas>
<scripttype="text/javascript">
//Get the Canvas object (canvas)
var canvas = document.getElementById("myCanvas");
//Simply detect whether the current browser supports Canvas objects, so as to avoid syntax errors in some browsers that do not support html5
if(canvas.getContext){  
    //Get the corresponding CanvasRenderingContext2D object (brush)
    var ctx = canvas.getContext("2d");  
   
    //Start a new drawing path
    ctx.beginPath();
    //Set the arc color to blue
    ctx.strokeStyle ="blue";
    var circle ={
        x :100, //The x-axis coordinate value of the center of the circle
        y : 100, //The y-axis coordinate value of the center of the circle
        r :50 //The radius of the circle
    };
    //Draw the arc along the clockwise direction of the circle with the coordinate point (100,100) as the center and the radius of 50px
    ctx.arc(circle.x, circle.y, circle.r,0,Math.PI /2,false);    
    //Draw the arc according to the specified path
    ctx.stroke();
}
</script>
</body>
</html>

The corresponding display effect is as follows

Draw an arc in a clockwise direction using canvas

As shown above, we set the coordinates of the center of the circle where the drawn arc is located (100,100), and the radius is 50px. rSince the perimeter of a circle with a radius is 2πr, that is to say, a complete circle, its corresponding radian is 2π(converted to a regular angle, it is 360°), so we want to draw a 1/4 arc of a circle, As long as the radian is π/2 (i.e. 90°) it's fine. In the above code, we used the constant representing pi in JavaScript Math.PI.

In addition, in the above code, we also set the direction of drawing the arc to be clockwise ( false). Since the starting radian is 0 and the ending radian is π/2, the arc will be drawn clockwise from the positive direction of the x-axis, resulting in the above graph. If we change the arc drawing direction in the above code to counterclockwise, what effect will it have?

<scripttype="text/javascript">
//Get the Canvas object (canvas)
var canvas = document.getElementById("myCanvas");
//Simply detect whether the current browser supports Canvas objects, so as to avoid syntax errors in some browsers that do not support html5
if(canvas.getContext){  
    //Get the corresponding CanvasRenderingContext2D object (brush)
    var ctx = canvas.getContext("2d");  
   
    //Start a new drawing path
    ctx.beginPath();
    //Set the arc color to blue
    ctx.strokeStyle ="blue";
    var circle ={
        x :100, //The x-axis coordinate value of the center of the circle
        y : 100, //The y-axis coordinate value of the center of the circle
        r :50 //The radius of the circle
    };
    //Draw the arc along the counterclockwise direction of the circle with the coordinate point (100,100) as the center and the radius of 50px
    ctx.arc(circle.x, circle.y, circle.r,0,Math.PI /2,true);    
    //Draw the arc according to the specified path
    ctx.stroke();
}
</script>

The corresponding display effect is as follows

Use canvas to draw an arc in a counterclockwise direction

Draw circle using canvas

当我们学会了绘制弧线之后，举一反三，我们想要绘制圆形自然也不在话下，只需要将上述代码的结束弧度改为2π即可。

<scripttype="text/javascript">
//获取Canvas对象(画布)
var canvas = document.getElementById("myCanvas");
//简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误
if(canvas.getContext){  
    //获取对应的CanvasRenderingContext2D对象(画笔)
    var ctx = canvas.getContext("2d");  
   
    //开始一个新的绘制路径
    ctx.beginPath();
    //设置弧线的颜色为蓝色
    ctx.strokeStyle ="blue";
    var circle ={
        x :100,    //圆心的x轴坐标值
        y :100,    //圆心的y轴坐标值
        r :50      //圆的半径
    };
    //以canvas中的坐标点(100,100)为圆心，绘制一个半径为50px的圆形
    ctx.arc(circle.x, circle.y, circle.r,0,Math.PI *2,true);    
    //按照指定的路径绘制弧线
    ctx.stroke();
}
</script>

对应的显示效果如下

使用canvas绘制的圆形

Remarks: arc()The starting radian parameter startRadand the ending radian parameter in the method endRadare in radians. Even if you fill in a number, such as 360, it will still be regarded as 360 radians. What are the consequences of setting the ending arc of the above code to 360? It depends on the direction of drawing (that is anticlockwise, the value of the parameter). If it is drawn clockwise ( false), a complete circle will be drawn; if it is drawn counterclockwise, radians greater than 2π will be converted to equal radians , but not greater than 2π radians. For example, set the ending radian in the above code to 3π( Math.PI * 3), if it anticlockwiseis false, it will be displayed as a complete circle, if it is true, the display effect will be the same as when it is set to π.

When the end radian is set to 3π, the drawing effect of clockwise (false) rotation

When the end radian is set to 3π, the drawing effect of counterclockwise (true) rotation