html部分
<canvas id="canvas">
</canvas>
js部分
<script>
getAngle(50, 30);
/**
* @param {Object} r angle角度对应圆的半径
* @param {Object} angle 角度
*/
function getAngle(r, angle) {
//超出360°进行缩减
while (angle > 360) {
angle = angle - 360;
}
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.beginPath();
//画里面的小弧度
console.log(7/30*angle)
ctx.arc(r, r, 20, 0, hypotenuse(r, angle), true);
//画下面那根固定线
ctx.moveTo(r, r);
ctx.lineTo(2 * r, r);
//画根据角度变化的线
ctx.moveTo(r, r);
//将半径当作斜边 根据sin cos求出对边和领边的长度 换算成对应的x y坐标
ctx.lineTo(r + r * Math.cos(getHud(angle)), r - r * Math.sin(getHud(angle)));
//画文字
ctx.font = "10px Arial";
//计算文字位置
ctx.fillText(angle + '°', r+22, r-1/6*angle);
ctx.stroke();
}
//换算小弧度的大小
function hypotenuse(r, angle) {
return (2 - angle / 180) * Math.PI;
}
//换算角度对应的弧度
function getHud(angle) {
return angle / 180 * Math.PI
}
</script>
成品