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

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

javascript html5 canvas

383 просмотра

1 ответ

Так как я учусь новому в 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/

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

Автор: Brian Источник Размещён: 12.11.2019 09:03

Ответы (1)

1 плюс

Вы можете анимировать таблицу спрайтов вместо .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>

Автор: markE Размещён: 15.12.2015 04:09

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

Ответы (1)

Вопросы из категории :