为什么html5 canvas标签使用PI值绘制圆圈？

Question

var c = document.getElementById("myCanvas");
var cir = c.getContext("2d");
cir.beginPath();
cir.arc(100, 100, 50, 0, 2* Math.PI );
cir.stroke();

or

var c = document.getElementById("myCanvas");
var cir = c.getContext("2d");
cir.beginPath();
cir.arc(100, 100, 50, 0, 6.14);
cir.stroke();

This two code can draw a full circle so in this why we are using pi value in this ?

Answer 1

Angles can be measured with a variety of different measures. The most common are:

• Degrees , where 360 degrees equals one full circle
• Radians , where the mathematical constant π (Greek letter Pi) — which is roughly 3.14159265 — is one half circle, and a full circle is 2π .

The arc(x, y, radius, startAngle, endAngle, anticlockwise) function takes angles in radians, so passing the values startAngle=0 and endAngle=2*Math.PI will draw a complete circle with radius radius from point (x,y) .

Edit: The line of code that you posted:

cir.arc(100, 100, 50, 0, 6.14);

Will draw most of a circle, as 6.14 < 2π . 2π is approximately 6.283185, so the arc will be about 98% of a full circle.

Answer 2

Its using Radians as the unit of measure to describe the angle of the arc. This is very common in programming languages, especially in graphics programming. A full circle, 360 degrees, is equal to 2 * PI Radians.

Answer 3

Value of Math.PI: 3.141592653589793 is more accurate. And cir.arc(100, 100, 50, 0, 6.14); does not make full circle.

Answer 4

The second code does not draw a full circle: there is a gap on the right. The reason is that 6.14 is less than a full circle (in radians), which is 2π, about 6.28. It is common to use the property Math.PI for π in JavaScript, since it gives a very accurate approximation (the most accurate approximation achievable using a double precision floating point number in the system).

PS This is not about the canvas tag but about JavaScript code that draws on a canvas specified by a canvas element.