Gra w canvas - generowanie postaci.

Question

Witam, postanowiłem napisać swoją grę w Canvas. Do tej pory moje gry polegały na poruszaniu się prostych kształtów rysowanych "ręcznie" w canvasie. Chciałem zapytać jak mógłbym do canvasa dodać grafikę, której mógłbym nadać animację. Pozdrawiam.

Answer 1

SVG vs Canvas | 6 Most Valuable Differences You Should Know
When to Use SVG vs. When to Use Canvas
Canvas vs. SVG: Choosing the Right Tool for the Job
Canvas vs SVG: How to Choose the Right Format

Canvas animation
Simply canvas game animation (with music, controls)

Answer 2

@ref

Comments

https://kursownik.pl/kursy/html5_canvas/1/1/

---

Bardzo fajny kursik, na pewno skorzystam. Bardziej chodziło mi o animacje, które umożliwiają nam grafiki svg. Po głębszym zastanowieniu doszedłem do wniosku, że dość mocno obciążyło by to kod.

Answer 3

let canvas = document.getElementById('my_canvas');
let context = canvas.getContext('2d');
let imgPath = 'LINKDOIMG.PNG';
let imgObj = new Image();

imgObj.src = imgPath;
 
let x = 0;
let y = 0;
 
imgObj.onload = function(){
    //Draw the image onto the canvas.
    context.drawImage(imgObj, x, y);
}

Powinno zadziałać

Comments

daj plusa

---

@Maciej Dēbowski, na pewno ten kod jest dobry? Wywala błąd 

"<a class='gotoLine' href='#27:22'>27:22</a> Uncaught TypeError: Cannot read property 'getContext' of null"

 

---

https://thisinterestsme.com/javascript-add-image-to-canvas/

---

Do pełnej odpowiedzi brakuje jak dodać animacje

---

https://codepen.io/search/pens?q=canvas+animation