在HTML5和畫布中動畫圖像
[英]Animating images in HTML5 and canvas
問題描述
我需要幫助在HTML5和JavaScript中將圖像浮動到畫布上。 我一直在谷歌搜索，沒有找到任何東西。 我可以在屏幕上繪制形狀，但我不知道如何動畫它們。 我想要幾個不同的圖像從不同的方向漂浮在畫布上。 有人可以幫我這個嗎？ 經過4個小時的谷歌搜索，我能做的就是這個
<script type = "Text/JavaScript">
function Animate(){
var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
var img = new Image();
img.onload = function ()
{
ctx.drawImage(img,20,20,300,300);
};
img.src = "vb.png";
}
</script>
</head>
<body>
<canvas id="myCanvas" height="200" width="800"></canvas>
<br><button onclick="Animate();">Restart</button>
似乎有很多關於動畫形狀的教程，但我想加載我自己的圖片並讓它們飛到畫布上。
3 個解決方案
解決方案1
12 已采納 2012-03-20 17:46:23
嘗試帆布動畫的這個非常基本的演示：
window.addEventListener('load', function () {
var
img = new Image,
ctx = document.getElementById('myCanvas').getContext('2d');
img.src = 'http://www.gravatar.com/avatar/a1f80339c0cef95be6dc73e0ac510d5d?s=32&d=identicon&r=PG';
img.addEventListener('load', function () {
var interval = setInterval(function() {
var x = 0, y = 0;
return function () {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.drawImage(img, x, y);
x += 1;
if (x > ctx.canvas.width) {
x = 0;
}
};
}(), 1000/40);
}, false);
}, false);
雖然有很多可以做得更好的事情。 例如：
使用
requestAnimationFrame而不是間隔以更方便的方式預加載圖像
使用速度和時間差（從最后到當前幀）而不是固定增量
還有很多
但是，由於所有這些都會使示例過於復雜，我會保持原樣並希望您在學習的同時閱讀這些主題。
解決方案2
2 2014-12-16 02:29:03
以下是HTML5畫布上畫布內的簡單示例彈跳球動畫。
<body>
<canvas id="Canvas01" width="400" height="400" style="border:5px solid #FF9933; margin-left:10px; margin-top:10px;"></canvas>
<script>
var canvas = document.getElementById('Canvas01');
var ctx = canvas.getContext('2d');
var p = {x:25, y:25};
var velo=6, corner=30, rad=20;
var ball={x:p.x, y:p.y};
var moveX=Math.cos(Math.PI/180*corner) * velo;
var moveY=Math.sin(Math.PI/180*corner) * velo;
function DrawMe() {
ctx.clearRect(0,0,canvas.width, canvas.height);
if(ball.x>canvas.width-rad || ball.x<rad) moveX=-moveX;
if(ball.y>canvas.height-rad || ball.y<rad) moveY=-moveY;
ball.x +=moveX;
ball.y +=moveY;
ctx.beginPath();
ctx.fillStyle = 'blue';
ctx.arc(ball.x, ball.y, rad, 0 , Math.PI*2,false);
ctx.fill();
ctx.closePath();
}
setInterval(DrawMe,30);
</script>
</body>
你可以在這里自己嘗試一下： http://codetutorial.com/examples-canvas/canvas-examples-bounce-ball
解決方案3
2 2012-03-20 17:47:03
要使用畫布動畫，您需要記錄對象的位置，然后在新幀setInterval(draw, 1000 / 25);上增加它setInterval(draw, 1000 / 25); 允許您在指定的時間間隔后運行函數。 每次渲染新幀時，您都可以使用此函數更新對象在頁面上的位置。
例如：
function draw() { playersShip.move(); }
移動函數增加或減少對象的x和/或y坐標。 此行在指定坐標處繪制指定的圖像（在渲染每個幀時更新）。
ctx.drawImage(shipImage, playersShip.position.x, playersShip.position.y);
如果您構建游戲或類似游戲，最好將對象的移動與幀率隔離開來。 如果您需要，我可以提供更深入的樣品。
使用這個想法，您應該能夠創建圖像的動畫。
HTML5 Canvas中的動畫不透明度
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.