Можете ли вы анимировать изображение на холсте

, так как я изучаю новое для html и javascript, мне было интересно, можно ли разместить движущееся изображение сбоку на холсте? Если да, то как это можно сделать, пожалуйста ???Можете ли вы анимировать изображение на холсте

Вот что я должен сделать до сих пор.

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="ann.css" /> 

<script> 
window.onload = animate; 

var canvas=document.getElementById('mycanvas'); 
var ctx=canvas.getContext('2d'); 

function animate() 
{ 
window.setInterval(slide,1000); 
} 



function slide() 
{ 
var obj = document.getElementById("ball"); 
var left = obj.style.left; 
if(left === ''){ 
    left = 0; 
} 
var wartosc = parseInt(left, 10); 
obj.style.left = (wartosc + 10) + "px"; 
} 

function Loop() { 
if (left>canvas.width){ 
    var right = obj.style.right; 
if(right === ''){ 
    right = 0; 
} 
var wartosc = parseInt(right, 10); 
obj.style.right = (wartosc + 10) + "px"; 

} 
</script> 

<style> 
#ball 
{ 
    position: relative; 
    left: 1px; 
} 
#mycanvas {border:1px solid #000000} 
</style> 
</head> 

<body> 
    <img src="ball.gif" id="ball" alt="Usmiech" width="30" height="30" /> 


    <canvas id=mycanvas width=600 height=50>Canvas Not Supported 
    </canvas> 

<body> 
</html>

То, что я хочу это сделать, для изображения, которые должны содержаться внутри холста и двигаться слева направо и при достижении правой стороны холста, чтобы вернуться налево и так далее непрерывно.

Однако мои проблемы в том, могут ли быть выполнены, я не знаю, как я могу поместить изображение на холст, а затем я не могу заставить изображение перемещаться вправо, как только он достигнет конца холста. Я думаю, что проблема заключается в моей функции цикла, которая заключается в попытке сделать это направо.

Как вы можете видеть из ссылки на скрипку, когда я удаляю код функции цикла, он работает. Однако он будет идти только влево.

http://jsfiddle.net/eCSb4/18/

Пожалуйста, может кто-то помочь мне исправить это? :)

источник

2015-12-14 Brian

Что о создании 'gif'? – Adjit

Что это значит? Изображение, которое я выбрал, является gif только для более специальных эффектов. – Brian

Как и уход за анимацией с использованием анимированного gif вместо анимации jpeg – Adjit

Вы можете анимировать спрайт вместо .gif.

Последовательность проста:

Очистить холст,
Нарисуйте следующий спрайт в последовательности и положении, чтобы продвинуться по холсту.
Подождите некоторое время (возможно, в петле requestAnimationFrame).
Повторите # 1.

Вот аннотированный код и демо:

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 
// timing related vars 
 
var nextTime=0; 
 
var spriteCount=7; 
 
var interval=700/spriteCount; 
 
// sprite related vars 
 
var sIndex=0; 
 
var sw=60; 
 
var sh=95; 
 
var animationOn=true; 
 

 
// current x,y position of sprite 
 
var x=100; 
 
var y=100; 
 

 
// load the spritesheet 
 
var ss=new Image(); 
 
ss.onload=start; 
 
ss.src="http://i59.tinypic.com/jpkk6f.jpg"; 
 
function start(){ 
 

 
    // draw the first sprite 
 
    ctx.drawImage(ss,sIndex*sw,0,sw,sh,x,y,sw,sh); 
 

 
    // start the animation loop 
 
    requestAnimationFrame(animate); 
 

 
} 
 

 
function animate(time){ 
 
    // wait for the specified interval before drawing anything 
 
    if(time<nextTime || !animationOn){requestAnimationFrame(animate); return;} 
 
    nextTime=time+interval; 
 
    // draw the new sprite 
 
    ctx.clearRect(0,0,cw,ch); 
 
    ctx.drawImage(ss,sIndex*sw,0,sw,sh,x,y,sw,sh); 
 
    // get the next sprite in sequence 
 
    if(++sIndex>=spriteCount){sIndex=0;} 
 
    // advance the sprite rightward 
 
    x+=5; 
 
    if(x>cw){x=-sw-10;} 
 
    // request another animation loop 
 
    requestAnimationFrame(animate); 
 
}

body{ background-color: ivory; } 
 
#canvas{border:1px solid red; margin:0 auto; }

<canvas id="canvas" width=300 height=300></canvas>

источник

2015-12-15 04:09:15 markE

Я думаю, вы можете увидеть мой удаленный ответ. Я думаю, что нас обманывает название вопроса и присутствие «.gif» в сообщении. при взгляде на скрипку кажется, что OP не хочет рисовать этот анимированный gif, а просто перемещать элемент изображения «слева направо» ... – Kaiido

@Kaiido, Мой ответ обе запускает анимированный спрайт и перемещается слева направо. Разве это не то, чего хочет OP? : - // – markE

Честно говоря, я не знаю, что OP действительно хочет ... – Kaiido

Можете ли вы анимировать изображение на холсте

ответ

Смежные вопросы