倚栏听风倚栏听风

不积跬步
无以至千里

canvas 中圆的弧度和角度

基本概念

弧度和角度是度量角的两种不同单位。

角度: 两条射线从圆心向圆周射出,形成一个夹角和夹角正对的一段弧。当这段弧长正好等于圆周长的360分之一时,两条射线的夹角的大小为1度。 它的范围:0 ~ 360°

弧度: 两条射线从圆心向圆周射出,形成一个夹角和夹角正对的一段弧。当这段弧长正好等于圆的半径时,两条射线的夹角大小为1弧度。 它的范围:0 ~ 2π。

img

​ 图:1 弧度的大小

弧度转为角度

设 x 为弧度,y 为角度:

y = x * 2π / 360 = x * π / 180

角度转为弧度
x = y * 360 / 2π = y * 180 / π

使用 canvas 画圆

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
// 一共有 5 个参数
// ctx.arc(圆心x, 圆心y, 半径, 起始角, 终点角); arc n.弧线
ctx.arc(100, 75, 50, 0, 2 * Math.PI);// 0, 2 * Math.PI 表示一个不带缺口的正圆
ctx.stroke();
本原创文章未经允许不得转载 | 当前页面:倚栏听风 » canvas 中圆的弧度和角度

评论