个人中心
文章发布
退出
作者热门文章
- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库？
- java - OnItemClickListener 不起作用，但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
26
4
我想在 HTML5 Canvas 上绘制一个沿着复杂轨迹移动的点。我知道该怎么做；参见，例如，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>最佳答案
不是每帧都清除矩形，而是在 alpha channel 中绘制它以暂时保存那些先前的点。我用 fillRect 替换了你的 clearRect fillStyle 是白色透明的。
请记住，您可以调整 alpha channel ，这将使圆点停留更长/更短的时间。在我的代码中，这是 ctx.fillStyle = "rgba(255, 255, 255, 0.04)"; 中的 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>关于javascript - 有没有办法在HTML5 canvas上画一个 "streak"(淡出 "digital phosphor"效果)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43074023/
26
4
0
我想在 HTML5 Canvas 上绘制一个沿着复杂轨迹移动的点。我知道该怎么做；参见，例如，Lorenz attractor如下实现。但是对于小点很难跟随。 有没有办法在点后面添加模糊轨迹？我可以保
我是一名优秀的程序员,十分优秀！