今天遇到一个奇怪的问题,restore 只能读取一次状态,也许是 save 的设计使然吧。
都说,canvas restore 可以还原画布旋转( rotate )、平移( translate )变换,于是想画一个旋转对称画面就有了如下代码:
<!DOCTYPE html>
<html><meta charset="utf-8" >
<body>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script language="JavaScript" type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.translate(150,150);//为便于观看效果,先将画布平移一次
ctx.save();//存储状态先
for(let i=0;i<8;i++){
ctx.fillStyle='#0066CC';
ctx.translate(100,100);
ctx.rotate(45*i*Math.PI/180);
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.lineTo(0,0);
ctx.closePath();
ctx.fill();
ctx.fillStyle="#ffffff";
ctx.fillText(i+1,15,50);
ctx.restore();//还原画布
}
ctx.restore();
ctx.fillStyle='#00f033';
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(0,10);
ctx.lineTo(10,10);
ctx.lineTo(0,0);
ctx.closePath();
ctx.fill();
</script>
</body>
</html>
但是,得到的是这样的效果:
本来期望的是如下效果:
可见,画布的旋转和平移经测试,只能恢复一次 )用 restore 是无法连续恢复的:
<!DOCTYPE html>
<html><meta charset="utf-8" >
<body>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script language="JavaScript" type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.translate(150,150);//为便于观看效果,先将画布平移一次
ctx.save();//存储状态先
for(let i=0;i<8;i++){
ctx.fillStyle='#0066CC';
ctx.translate(100,100);
ctx.rotate(45*i*Math.PI/180);
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.lineTo(0,0);
ctx.closePath();
ctx.fill();
ctx.fillStyle="#ffffff";
ctx.fillText(i+1,15,50);
ctx.restore();
ctx.save();//存储状态先
}
ctx.restore();
ctx.fillStyle='#00f033';
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(0,10);
ctx.lineTo(10,10);
ctx.lineTo(0,0);
ctx.closePath();
ctx.fill();
</script>
</body>
</html>