Javascript 平移图像：在页面加载后将调用从按钮切换为自动

Question

这让我发疯。我从互联网上找到了一些有趣的 JS 图像平移代码。它工作得很好，但是图像开始在按钮单击事件上平移，我希望它在页面加载后自动开始平移。

我可以在第 12 行和第 14 行看到 canvas 元素加载，然后是按钮。我还可以看到在第 37 行将函数 startStop() 传递给 btnStart 的脚本。我玩了很长时间有了这个，但对于我来说，我无法将按钮单击事件与脚本的其余部分分开，以便可以自动启动整个功能。我不是一个 JS 程序员。任何帮助将不胜感激。九个小时后，我被这个打败了。非常感谢 - 彼得

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>The problem</title>
<meta name="viewport" content="width=device-width">
<meta name="robots" content="noindex,follow">
<link rel="stylesheet" href="style01.css" />
</head>

<body>
<div>
<canvas id="bg" width="440" height="220"></canvas>
<br /><br />
<button id="btnStart" class="btn btn-default">Start/stop animation</button>
</div>

<script>
(function() {
window.requestAnimationFrame = window.requestAnimationFrame
|| window.webkitRequestAnimationFrame
|| window.mozRequestAnimationFrame
|| function(callback) { window.setTimeout(callback, 1000 / 60); };

var canvas = document.getElementById('bg');
var context = canvas.getContext('2d');
var looping = false;
var totalSeconds = 0;

var img = new Image();
img.onload = imageLoaded;
img.src = '/img/bg01.jpg';

function imageLoaded() {
draw(0);

var btn = document.getElementById('btnStart');
btn.addEventListener('click', function() {
startStop();
});
}

var lastFrameTime = 0;

function startStop() {
looping = !looping;

if (looping) {
lastFrameTime = Date.now();
requestAnimationFrame(loop);
}
}

function loop() {
if (!looping) {
return;
}

requestAnimationFrame(loop);

var now = Date.now();
var deltaSeconds = (now - lastFrameTime) / 5000;
lastFrameTime = now;
draw(deltaSeconds);
}

function draw(delta) {
totalSeconds += delta;
var x = -1 * (img.width - canvas.width) / 2 * (1 + Math.cos(totalSeconds / Math.PI));
var y = -1 * (img.height - canvas.height) / 2 * (1 + -Math.sin(totalSeconds / Math.PI));

context.drawImage(img, x, y);
}
}());
</script>

</body>
</html>

Answer 1

这看起来很简单，但是由于代码中缺少缩进，所以很难做到。我建议您在此脚本中添加一些选项卡以使其更易于阅读。

至于这个问题，你只需要去掉按钮中的事件添加，只需要运行函数就可以了。所以在这部分：

var btn = document.getElementById('btnStart');
btn.addEventListener('click', function() {
startStop();
});

只用这个代替：

startStop();

之后，您可以从 HTML 中完全删除按钮。

Javascript 平移图像：在页面加载后将调用从按钮切换为自动

Javascript panning image: Switch invokation from button to automatic after page load

javascript

image

button

panning