Javascript 旋转HTML画布圆形比例

我在用HTML5画布旋转一个圆圈时遇到了麻烦。 功能是控制一个圆， 但是规模已经失控了

有人知道如何调整（或设置旋转）比例以适应画布圆圈吗

起始角（0.7π）和结束角（0.3π）。 我需要重置旋转吗？ -->ctx.旋转（数学PI*3/16）； -->（数学pi*15/10*1/8）

var度=0；
var color=“浅蓝色”；
变量bgcolor=“#222”；
var画布、ctx、W、Htext；
函数init_rpm（名称，val）{
canvas=document.getElementById（名称）；
ctx=canvas.getContext（“2d”）；
//尺寸
W=画布宽度；
H=画布高度；
//每次绘制图表时清除画布
ctx.clearRect（0，0，W，H）；
//背景360度弧
ctx.beginPath（）；
ctx.lineWidth=25；
ctx.strokeStyle=bgcolor；
ctx.arc（W/2，H/2，Math.floor（W/3），0.7*Math.PI，0.3*Math.PI，false）；//现在可以看到src了
ctx.stroke（）；
//中心圆
ctx.save（）；
ctx.beginPath（）；
ctx.strokeStyle='rgba（255,255,255,2）'；
ctx.线宽=10；
ctx.arc（W/2，H/2，数学地板（W/3）-40，0.7*Math.PI，0.3*Math.PI，false）；
ctx.stroke（）；
ctx.restore（）；
//鳞片
ctx.save（）；
翻译（300300）；
对于（变量i=0；i<9；i++）{
ctx.beginPath（）；
ctx.lineWidth=2；
ctx.strokeStyle='rgba（255,255,255,3）'；
ctx.moveTo（130,0）；
ctx.lineTo（140,0）；
ctx.stroke（）；
ctx.旋转（数学PI*3/16）；
}
ctx.restore（）；
//弧度角度=弧度角度*pi/180颜色
var百分比=val/8000*100；
ctx.beginPath（）；
ctx.lineWidth=30；
//ctx.strokeStyle=颜色；
var my_gradient=ctx.createLinearGradient（0、150、250、300）；
my_gradient.addColorStop（0，#B31918”）；
my_gradient.addColorStop（1，#FFA000”）；
ctx.strokeStyle=my_梯度；
//弧线从最右边开始。如果我们从角度中减去90度
//圆弧将从最顶端开始
ctx.arc（W/2，H/2，数学楼层（W/3），0.7*Math.PI，0.7*Math.PI+1.6*Math.PI/100*percent，false）；//您现在可以看到src了
ctx.stroke（）；
//添加文本
ctx.fillStyle=颜色；
ctx.font=“7vh播放”；
//文本=数学地板（度/360*8）+“RPM”；
文本=度/360*8；
text_width=ctx.measureText（text）.width；
ctx.fillText（文本，W/2-文本宽度/2，H/2+15）；
ctx.font=“3vh播放”；
text2='RPM'；
ctx.fillText（文本2，W/2-文本宽度/2，H/2+70）；
}
函数绘图（val、名称、类型）{
//控制台日志（val）；
如果（名称！=“”| |名称！=null）{
如果（类型=“rpm”）{
如果（val！=“”| | val！=null）{
度=val/1000/8*360；
}否则{
度=180度；
}
初始rpm（名称，val）；
}否则如果（类型==“公里小时”）{
如果（val！=“”| | val！=null）{
度=val；
}否则{
度=180度；
}
init_kmh（名称）；
}
}否则{
log（'找不到画布id'）；
}
}
$（文档）.ready（函数（）{
//画布初始化
绘制（0，“画布3”，“rpm”）；
var rpmControl2=document.querySelector（'input[id=get_rpm]”）；
rpmControl2.addEventListener（'input'，function（）{
绘制（该值为“canvas3”、“rpm”）；
});
});
#游说2{
显示：内联；
}
身体{
背景：#333；
字体系列：“播放”，无衬线；
}

转速
通过在单个方向上绘制刻度线，然后控制上下文的旋转，使所有这些线指向不同的角度来绘制刻度。

就像你拿着一把尺子总是朝着同一个方向，只是简单地旋转下面的一页纸。

因此，要控制缩放的旋转，必须在绘制第一条线之前设置上下文的旋转（或纸页）


var ctx=c.getContext（'2d'）；
angle.oninput=函数（e）{
ctx.clearRect（0，0，c.宽度，c.高度）；
var rad=角度值*（数学PI/180）；
//移动上下文，使其中心位于0,0
ctx.setTransform（1,0,0,1，c.width/2，c.height/2）；
//旋转它，使我们面对所需的角度
ctx.旋转（rad）；
var stepAngle=数学PI*2/14，
innerRad=c.宽度/2.8，
外层=c.宽度/2.5；
ctx.beginPath（）；
对于（变量i=0；i<12；i++）{
ctx.moveTo（0，innerRad）；//垂直移动
ctx.lineTo（0，外层）；//垂直绘制线
ctx.rotate（stepAngle）；//按固定增量旋转
}
stroke（）；//全部绘制，我们可以绘制
setTransform（1,0,0,1,0,0）；//重置上下文的位置
};
angle.oninput（）


[link]我想scole txt也有一些问题？我怎样才能把数字旋转到相同的程度@iWJ yes如果希望文本全部朝北，则必须再次反向旋转，将文本位置作为旋转的定位点。因此，最好只移动上下文转换矩阵，并始终在0,0处绘制文本。