私はこの種のプログラミングを前にやったことがありますが、それは長い間しばらくしていましたが、しばらくは試してみましたが、私はこれを得ることができません。私はインターネット上で見つけた他の同様のコードを試してみましたが、私が望むように正確に動作しません!私は基本的に155x55のキャンバスを望んでおり、50x50のイメージがそれを横切ってシンプルに動きます。どのようにシンプルに聞こえても...私は苦労しています...私は以前のコードを適応しようとしましたが、それはボールをバウンスするためのものでした、そして、それはずっと前です。助けていただければ幸いです。ありがとう!シンプルなキャンバスのアニメーション:50x50の画像が移動する
var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");
var speed = 1;
a = new Image();
a.src = "http://www.animated-gifs.eu/category_cartoons/avatars-100x100-cartoons-spongebob/0038.gif";
function frameRate(fps) {
timer = window.setInterval(updateCanvas, 1000/fps);
}
function updateCanvas() {
ctx.fillRect(0,0, myCanvas.width, myCanvas.height);
draw();
}
function draw() {
/* Add code here to randomly add or subtract small values
* from x and y, and then draw a circle centered on (x,y).
*/
var x = 0 + speed;
var y = 20;
if (x > 150) {
x == 1;
}
ctx.beginPath();
ctx.drawImage(a,x,y,100,100);
}
/* Begin animation */
frameRate(25);
フィドルリンク: https://jsfiddle.net/th6fcdr1/
あなたが実際にコードでこれをやりたいですか?個人的には、これは私が変換トランスレーションを使用してCSSで行うことのようなものです。 –