Как анимировать изображение на холсте, используя requestAnimationFrame? - PullRequest
Новая
       47

Как анимировать изображение на холсте, используя requestAnimationFrame?

0 голосов
/ 21 сентября 2018

Я хочу переместить изображение слева направо, используя requestAnimationFrame на холсте HTML5. 

let canvas= document.querySelector("canvas");
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
let c= canvas.getContext('2d');

let image= new Image();
image.src="./balloon.png";

let x=0;

function draw(){
    image.addEventListener("load",()=>{
        c.drawImage(image,x,0);
    });  
}

function update(){
    x+=1;
    draw();
}

function animate(){
    c.clearRect(0,0,canvas.width,canvas.height);
    requestAnimationFrame(animate);
    update();  
}
animate();

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

1 Ответ

0 голосов
/ 21 сентября 2018

Вам нужно загрузить изображение только один раз. 

let canvas= document.querySelector("canvas");
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
let c= canvas.getContext('2d');

let image= new Image();
image.src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg";

let x=0;

 image.addEventListener("load",()=>{
        c.drawImage(image,x,0);
    });  

function draw(){
 
        c.drawImage(image,x,0);
  
}

function update(){
    x+=1;
    draw();
}


function animate(){
    c.clearRect(0,0,canvas.width,canvas.height);
    requestAnimationFrame(animate);
    update();  
}
animate();
<canvas></canvas>
...