Question

我想在HTML5画布上绘制一个跟随复杂轨迹的移动点。我知道怎么做;例如，请参阅下面实施的Lorenz attractor。但是对于小点，很难遵循。 有没有办法在点后添加模糊的痕迹？我可以保留已绘制点的历史记录，我只是不知道如何使它们褪色。

在技术方面，我认为这将是折线/曲线，其中不透明度/宽度/颜色沿曲线平滑变化。我知道如何绘制折线（如果需要的话，可以弄清楚Bezier曲线的东西），但我不知道如何在路径上应用平滑的渐变。

（数字示波器解决了这个＆＃34;问题＆＃34;通过使用数字荧光示波器效果，示波器模拟旧的模拟＆＃34;荧光效果：效果范围＆＃39; s＆＃34;光束＆＃34;需要一段时间才能消失。）

＆＃13;

<!DOCTYPE html>
<html>
<head><script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function(event) {
	var x = 1, y = 0, z = 0, t=0;
	function onTick(timestamp)
	{
		var ctx = document.getElementById('canvas').getContext('2d');
		ctx.clearRect(0, 0, 300, 300);
		ctx.fillStyle = 'black';
		var cx = 150;
		var cy = 150;
		var r = 5;
		var now = timestamp * 0.001;
		var dt = now - t;
		t = now;
		if (dt > 0.1)
			dt = 0.1;
		// Lorenz attractor
		var sigma = 10, rho=28, beta=8/3;
		var dxdt = sigma*(y-x);
		var dydt = x*(rho-z)-y;
		var dzdt = x*y-beta*z;
		x += dt*dxdt;
		y += dt*dydt;
		z += dt*dzdt;
		
		var drawx = cx + r*x;
		var drawy = cy + r*y;
		var rdot = 2;
		ctx.beginPath();
		ctx.arc(drawx, drawy, rdot, 0, 2 * Math.PI, true);
		ctx.fill();
		requestAnimationFrame(onTick);		
	}
	requestAnimationFrame(onTick);
  });
</script></head>
<body>
  <canvas id="canvas" width="300" height="300"/>
  </body>
</html>

＆＃13;

Answer 1

不是每帧都清除矩形，而是在alpha通道中绘制它以暂时保存以前的点。我将clearRect替换为fillRect，fillStyle为白色透视。

保持你可以调整alpha通道，这将使点停留更长/更短的持续时间。在我的代码中，这是0.04中的ctx.fillStyle = "rgba(255, 255, 255, 0.04)";。我只是将它调低以使这些痕迹停留更长时间。

document.addEventListener("DOMContentLoaded", function(event) {
	var x = 1, y = 0, z = 0, t=0;
	function onTick(timestamp)
	{
		var ctx = document.getElementById('canvas').getContext('2d');
		//ctx.clearRect(0, 0, 300, 300);
        ctx.fillStyle = "rgba(255, 255, 255, 0.04)";
        ctx.fillRect(0, 0, 300, 300);
		ctx.fillStyle = 'black';
		var cx = 150;
		var cy = 150;
		var r = 5;
		var now = timestamp * 0.001;
		var dt = now - t;
		t = now;
		if (dt > 0.1)
			dt = 0.1;
		// Lorenz attractor
		var sigma = 10, rho=28, beta=8/3;
		var dxdt = sigma*(y-x);
		var dydt = x*(rho-z)-y;
		var dzdt = x*y-beta*z;
		x += dt*dxdt;
		y += dt*dydt;
		z += dt*dzdt;
		
		var drawx = cx + r*x;
		var drawy = cy + r*y;
		var rdot = 2;
		ctx.beginPath();
		ctx.arc(drawx, drawy, rdot, 0, 2 * Math.PI, true);
		ctx.fill();
		requestAnimationFrame(onTick);		
	}
	requestAnimationFrame(onTick);
  });

canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

<canvas id="canvas"></canvas>

Answer 2

经典技巧是绘制折线而不是单点，改变折线每个顶点的颜色和/或不透明度，最明亮的是沿着导线最远的

是否有任何方法可以画出＆＃34;连胜＆＃34; （在HTML5画布上褪色＆＃34;数字荧光粉＆＃34;效果）？

2 个答案: