问题描述:当设置过画布的旋转弧度Math.PI/2后,之后再添加的内容都受之前的影响,都是旋转的,如何不受之前设置的旋转度数的影响
解决方案:
function drawHour(hour,minute){
ctx.save();//必须保存否则当前旋转影响后续判断
ctx.beginPath();
ctx.lineWidth=6;
ctx.lineCap="round";
var rad=2*Math.PI/12*hour;
var mrad=2*Math.PI/12/60*minute;
ctx.rotate(rad+mrad);
ctx.moveTo(0,10)
ctx.lineTo(0,-r/2);
ctx.stroke();
ctx.restore();//必须设置否则当前旋转影响后续判断
}
function drawMinutes(minute){
ctx.save();
ctx.beginPath();
ctx.lineWidth=3;
ctx.lineCap="round";
var rad=2*Math.PI/60*minute;
ctx.rotate(rad);
ctx.moveTo(0,10)
ctx.lineTo(0,-r+30);
ctx.stroke();
ctx.restore();
}
当已经画出时针后,若不设置ctx.save();
ctx.restore();
即使设置分钟为0,分针也会旋转;
设置后,之前的旋转角度不在影响当前