JavaScript | Sololearn: Learn to code for FREE!

+1

JavaScript

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

4/21/2021 9:30:31 AM

Alexander Sokolov

4 Answers

New Answer

+2

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.

+1

The easiest option is to turn it into an animated gif and just use the <img> tag. If you actually want to use it as an animated sprite that is a completely different thing altogether and there isn't enough space for me to go into that here. See: https://phaser.io/examples/v2/animation/sprite-sheet https://phaser.io/examples/v3/category/animation https://phaser.io/learn

+1

Martin Taylor I want to JavaScript.

+1

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