canvas画角度

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>

成品