Question

您好我有关于如何更改动画图像坐标的问题。

<html>
<head></head>
<body>
<canvas id="img" width="600" height="400" style="border:2px solid black;">
</canvas>
<script>
(function () {  
images = [];

function loop () {
var i;
window.requestAnimationFrame(loop);
for (i = 0; i < images.length; i += 1) {
images[i].update();
images[i].render();
}
}
function tampilan(gambar) {
var tampil = {},
indexFrame = 0,
jmlputaran = 0,
putaranPerFrame = gambar.putaranPerFrame || 0,
jmlFrame = gambar.jmlFrame || 1;

tampil.context = gambar.context;
tampil.width = gambar.width;
tampil.height = gambar.height;
tampil.x = 0;
tampil.y = 0;
tampil.image = gambar.image;
tampil.ratio = 1;

tampil.update = function () {
jmlputaran += 1;
if (jmlputaran > putaranPerFrame) {
jmlputaran = 0;
if (indexFrame < jmlFrame - 1) {    
if (indexFrame < jmlFrame - 1) {    
indexFrame += 1;
} 
else 
{
indexFrame = 0;
}
}
};  
tampil.render = function () {

tampil.context.drawImage(
tampil.image,
indexFrame * tampil.width / jmlFrame,
0,
tampil.width / jmlFrame,
tampil.height,
tampil.x,
tampil.y,
tampil.width / jmlFrame * tampil.ratio,
tampil.height * tampil.ratio);
};
tampil.lebarframe = function () {
return tampil.width / jmlFrame;
};
return tampil;
}
function draw () {  
var a,
img;
img = new Image();  
a = images.length;
images[a] = tampilan({
context: canvas.getContext("2d"),
width: 380,
height: 147,
image: img,
jmlFrame:3,
putaranPerFrame: 30,
});
img.src = "image.png";
}
var canvas = document.getElementById("img");
var context = canvas.getContext("2d");
{
draw();
}
loop();

}());
</script>
</body>
</html>

例如，我想让我的图像像这样移动 - ＆gt; www.html5canvastutorials.com/advanced/html5-canvas-quadratic-motion-animation /

谢谢。

Answer 1

您可以使用css过渡轻松完成此操作。这里是您需要的简单示例http://jsbin.com/pivayi/1/

Answer 2

您可以通过这种方式更改画布的坐标。

您需要download并附加jquery.transform2d.js插件。

Fiddle

上的演示

HTML：

<canvas id="img"></canvas>
<script type="text/javascript" src="path/to/the/downloaded/plugin"></script>

的JavaScript：

var canvas = document.getElementById("img");
var context = canvas.getContext("2d");
var sticky = new Image();
sticky.src = "http://www.joomlaworks.net/images/demos/galleries/abstract/3.jpg";
sticky.onload = function () {
    context.drawImage(sticky, 0, 0);
};

$('#img').click(function () {
    $('#img').animate({'transform': 'matrix(1,0,0,1,50,50)'});
});

要将图像移动到坐标（150,600），您可以将'matrix(1,0,0,1,50,50)'替换为'matrix(1,0,0,1,150,600)'

如何向左或向右创建动态图像动画？

2 个答案:

Fiddle

HTML：

的JavaScript：