Javascript平移图像:在页面加载后将调用从按钮切换为自动
Javascript平移图像:在页面加载后将调用从按钮切换为自动
提问于 2018-10-21 04:24:53
我都快疯了。我从互联网上找到了一些有趣的JS图像平移代码。它工作得很好，但图像在按钮单击事件时开始平移，我希望它在页面加载后自动开始平移。
我可以看到加载画布元素，然后是第12行和第14行的按钮。我还可以看到将函数startStop()传递给btnStart的脚本在第37行。我已经广泛地使用了这一点，但在我的生命周期中，我不能将按钮单击事件与脚本的其余部分分开，以便整个函数可以自动启动。我不是一个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>回答 1
Stack Overflow用户
回答已采纳
发布于 2018-10-21 04:41:00
这看起来很简单，但是由于代码中缺少缩进而变得很难。我建议您在此脚本中添加一些制表符，以使其更易于阅读。
至于问题，您所要做的就是删除按钮中添加的事件，而只需正确运行函数即可。所以在这一部分中：
var btn = document.getElementById('btnStart');
btn.addEventListener('click', function() {
startStop();
});仅将其替换为以下内容：
startStop();之后，您可以从HTML中完全删除该按钮。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52909819
复制相关文章
相似问题