Javascript在画布上绘制分形，递归保存和恢复问题答案

【问题标题】：Javascript drawing fractals on canvas, issue with recursive save and restoreJavascript在画布上绘制分形，递归保存和恢复问题
【发布时间】：2018-02-20 08:40:02
【问题描述】：

我正在尝试在画布上绘制大约 8 个变换，我正在使用来自 "Sierpniski triangle" 的示例来绘制我自己的，但是每当我将步长增加到大于 1 时，我似乎都在挣扎。这是一个小提琴我要走了：Current code

如果您取消注释第 43 到 49 行，您会看到它是如何被破坏的，但是如果您将第 14 行中的步长减小为： 1. 然后您将获得关于它应该是什么样子的完美可视化。所以问题是我尝试了多种方法来保存画布并恢复它，但是我递归绘制的事实使事情中断了。

另一件事，如果您取消注释第 43 到 49 行以及第 40 行并保留步长： 2. 您几乎可以完美地可视化它应该是什么样子，但事实上，每行附近都有一个额外的翻转形状转型使其不“完美”。

我尝试过 HTML5 litten 论坛，W3S 学校，并在这里搜索过，但找不到类似的东西。

【问题讨论】：

将您的代码直接包含在问题中会很好。现在，我手头没有电脑可以为您提供更多帮助，但不要使用保存/恢复进行转换。而是使用 setTransform 方法重新/设置为绝对值。你会发现它更容易管理。经验法则：如果没有剪辑路径，不保存，如果剪辑路径，仔细检查合成不能做得更好。
嗯，如果我们放弃使用保存和恢复，这会不会让分形绘图变得太难？
所以我终于拿到了一台电脑，但没有太多时间来重构它......因为，我认为使用 @987654323 不会达到预期的结果@ 作为基础。此代码仅在最后的步骤中绘制，即仅绘制黑色小三角形，伪分形实际上是绘图中的孔。
那么指定的代码肯定是用来达到预期结果的基础，这是讲师最初提供的任务。形状被重构以匹配不同的插图Link here。它不应该是一个精确的表示，而是在形状/边界方面相似。

标签： javascript canvas save restore

【解决方案1】：

我已经用下面的代码解决了这个问题：

<html>
<head>
	<script type="application/javascript">
	function draw(val=1) {
		var canvas = document.getElementById('canvas');
		if (canvas.getContext) {
			var ctx = canvas.getContext("2d");
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			drawT(); //Trait around the canvas (black border)
			drawF(val); //draw Fractal
		}
		function drawF(step,color=null)
		{
			var toDraw=false; //Color management variable to separate 4 transformations
			if (step > 0)
			{
				if(color) { toDraw=true; }
				step = step-1;
				ctx.save();
        
				ctx.transform(0.5, 0, 0, 0.5, 250,0);
				ctx.rotate(90*Math.PI/180);
				if(toDraw) { ctx.fillStyle=color; }
				else { ctx.fillStyle="#FF0000"; color="#FF0000"; }
	
				drawF(step, color);
				ctx.restore();

				ctx.save();
				ctx.transform(0.5, 0, 0, 0.5, 250, 0);
				ctx.scale(-1, 1);
				ctx.rotate(90*Math.PI/180);
				if(toDraw) { ctx.fillStyle=color; }
				else { ctx.fillStyle="#00FF00"; color="#00FF00"; }

				drawF(step, color);
				ctx.restore();
        
				ctx.save();
				ctx.transform(0.5, 0, 0, 0.5, 250, 250);
if(toDraw) { ctx.fillStyle=color; }
else { ctx.fillStyle="#0000FF"; color="#0000FF"; }
				
				drawF(step, color);
				ctx.restore();
				
				ctx.save();
				ctx.transform(0.2, 0, 0, 0.25, 250, 250);
				ctx.scale(1,1);
				ctx.rotate(90*Math.PI/180);
        if(toDraw) { ctx.fillStyle=color; }
        else { ctx.fillStyle="#FFFF00"; color="#FFFF00"; }
        
				drawF(step, color);
				ctx.restore();
			} else {
				drawShape();
			}
		}
		function drawT() {
			ctx.beginPath();
			ctx.moveTo(0, 0);
			ctx.lineTo(500,0);
			ctx.lineTo(500,500);
			ctx.lineTo(300,500);
			ctx.lineTo(300,400);
			ctx.lineTo(150,400);
			ctx.lineTo(150,250);
			ctx.lineTo(0, 250);
			ctx.closePath();
			ctx.stroke();
		}

		function drawShape() {
			ctx.beginPath();
			ctx.moveTo(0,0);
			ctx.lineTo(500,0);
			ctx.lineTo(500,500);
			ctx.lineTo(300,500);
			ctx.lineTo(300,400);
			ctx.lineTo(150,400);
			ctx.lineTo(150,250);
			ctx.lineTo(0, 250);
			ctx.closePath();
			ctx.fill();
		}
	}
	function showVal(newVal){
		draw(newVal);
	}
	</script>
</head>
	<body onload="draw();">
	   <canvas id="canvas" width="500" height="500"></canvas>
	</body>
	<input type="range" min="1" max="7" step="1" value="1"
	oninput="showVal(this.value)" onchange="showVal(this.value)">
</html>

使用滑块进行转换过程。

【讨论】：