如何使用html5制作播放按鈕？

Question

有人可以向我展示HTML5畫布中帶有簡單動畫的播放按鈕的概念嗎？

如果到達極限區域，它將自動返回，但是如何通過按鈕控制它呢？ 非常感謝。

對於前1

 var context; function setupAnimCanvas() { var canvas = document.getElementById('assignmenttwoCanvas'); if (canvas.getContext) { ctx = canvas.getContext('2d'); //setInterval('draw();', 20); //don't use this img = new Image(); img.onload = function(e) { draw(); //use this instead.. } img.src = '../images/dragon.png'; //animation(); draw(); //as we don't have an image to load, call here //remove when image is used instead } } var startPos = [500, 500]; var endPos = [0, 0]; var dx = -3, dy = -3; var x = startPos[0], y = startPos[1]; function draw() { ctx.clearRect(0, 0, 500, 500); //drawBackground(); //ctx.drawImage(img, x, y); ctx.fillRect(x, y, 20, 20); //for demo as no image x += dx; y += dy; if (x < endPos[0] || x > startPos[0] || y < endPos[1] || y > startPos[1] ) { dx = -dx; dy = -dy; } //moveit(); setTimeout(draw, 16); } setupAnimCanvas(); 

 <canvas id="assignmenttwoCanvas" width="500" height="500"></canvas> 

Answer 1

這是操作方法。

查看資料

如果您點擊按鈕，它將觸發反向

 var context; var startPos = [500, 500]; var endPos = [0, 0]; var dx = -3, dy = -3; var x = startPos[0], y = startPos[1]; function reverse(){ dx = -dx; dy = -dy; } function setupAnimCanvas() { var canvas = document.getElementById('assignmenttwoCanvas'); if (canvas.getContext) { ctx = canvas.getContext('2d'); //setInterval('draw();', 20); //don't use this img = new Image(); img.onload = function(e) { draw(); //use this instead.. } img.src = '../images/dragon.png'; //animation(); draw(); //as we don't have an image to load, call here //remove when image is used instead } } function draw() { ctx.clearRect(0, 0, 500, 500); //drawBackground(); //ctx.drawImage(img, x, y); ctx.fillRect(x, y, 20, 20); //for demo as no image x += dx; y += dy; if (x < endPos[0] || x > startPos[0] || y < endPos[1] || y > startPos[1] ) { dx = -dx; dy = -dy; } //moveit(); setTimeout(draw, 16); } setupAnimCanvas(); 

 <canvas id="assignmenttwoCanvas" width="500" height="500"></canvas> <button id="reverse" onclick=reverse()>Reverse</button>