我想在HTML5画布上绘制一个移动的点,它沿着复杂的轨迹运动。我知道如何实现这一点;例如,可以看到下面实现的Lorenz attractor。但是对于小点来说,很难跟踪。 有没有办法在点后面添加模糊的轨迹? 我可以保留绘制点的过去历史记录,我只是不知道如何使它们逐渐消失。
从技术角度来看,我认为这将是一条多段线/曲线,其中透明度/宽度/颜色沿着曲线平滑变化。我知道如何绘制多段线(如果需要,可以弄清楚贝塞尔曲线),但我不知道如何沿着路径应用平滑渐变。
(数字示波器通过具有数字荧光示波器效果来解决了这个“问题”,其中示波器模拟了旧的模拟“荧光体”效果:被示波器“束”击中的区域需要一段时间才能消失。)
<!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>