canvas restore 不能连续还原画布的(rotate)、平移(translate)变换

最新推荐文章于 2022-01-12 09:08:02 发布

jessezappy

最新推荐文章于 2022-01-12 09:08:02 发布

阅读量775

点赞数

分类专栏： Html 文章标签： canvas save translate

本文链接：https://blog.csdn.net/jessezappy/article/details/112060363

版权

Html 专栏收录该内容

30 篇文章 2 订阅

订阅专栏

今天遇到一个奇怪的问题，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>

jessezappy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
2
评论
canvas restore 不能连续还原画布的(rotate)、平移(translate)变换

今天遇到一个奇怪的问题，restore 只能读取一次状态，也许是 save 的设计使然吧。都说，canvas restore 可以还原画布旋转（ rotate ）、平移（translate ）变换，于是想画一个旋转对称画面就有了如下代码：<!DOCTYPE html><html><meta charset="utf-8" ><body><canvas id="myCanvas" width="500" height="500" sty..
复制链接

扫一扫