Это сводит меня с ума.Я нашел интересный код панорамирования изображения JS из Интернета.Это прекрасно работает, но изображение начинает панорамировать при событии нажатия кнопки, и я бы хотел, чтобы оно автоматически запускалось после загрузки страницы.
Я вижу загрузки элемента canvas, а затем кнопку в строках 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>