JavaScript

Question

how to animate this image on canvas?
and if possible, show me in the example code
https://i.ibb.co/zNSW6YH/IMG-20210420-121729.png

Answer 1

I won't do all the work for you but first you need to load your image, I like to do it like that:

const loadImage = new Promise(resolve => {
const img = new Image();
img.src = src;
img.onload = () => {
resolve(img);
};
});

const img = await loadImage("blah.jpeg");

And once you have that it's as simple as drawing a slice of your image onto another canvas.

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage

You need the 3rd overload that takes 9 parameters.

You've done animations before, just draw a different slice on every 3rd frame. Your image is made of 7 slices that are the same width so that makes it easier.

Answer 2

Martin Taylor I want to JavaScript.

Answer 3

Schindlabua relax :) i already found a solution.but although thanks, I'll read the article somehow.