Tutorijal : HTML5 Canvas anima...

Tutorijal : HTML5 Canvas animacija

ICE

IcE

13.10.2017 u 19:04

Canvas je dio HTML5 ali u njemu uopce nema htmla,citav canvas radi na javascriptu .
U ovoj temi pokusat cemo da vas naucimo kako animirati objekte putem html5 canvas-a jer u skorije vrijeme sve novije igrice na web-u su uglavnom canvas ili webGL . Ukoliko vas nesto zanima na ovu tematiku slobodno pitajte ovdje

ICE

IcE

13.10.2017 u 19:09

ono sto vam treba za ovaj tutorijal su jedan folder i dva fajla (index.html i demo.js)
prvi fajl (index.html) treba da ima normalnu html5 definiranu strukturu

[code]<!DOCTYPE html>
<head>
<title>Tutorijal</title>
</head>
<script src="demo.js"></script>
</body>
</html>[/code]

ICE

IcE

13.10.2017 u 19:22

Nakon brzinskog kreiranja indexa bacamo se odmah na kreaciju demo.js javascript fajla u kojem cemo da radimo svakakva cuda

prvo i osnovno sto nam treba da bi ovo radilo je najvazniji dio koda u kojem definiramo i kreiramo element "canvas" u browseru
[code]

var canvas = document.createElement("canvas");

[/code]

Nakon kreacije naseg canvas elementa treba nam nesto sto se u ovom programskom jeziku zove kontekst,element konteksta mozete nazvati kako god zelite, context / ctx ili nesto trece dokle god je definiran element canvas-a u kontextu
[code]

var ctx = canvas.getContext("2d");

[/code]

Dakle ,kreirali smo canvas i dali mu kontext ,vrijeme je za definiranje canvas-a (sirina,visina)
[code]

canvas.width = 800;
canvas.height = 400;

[/code]

Ako ste mislili da je to sad to ,jbg zajeb .. da bi canvas bio vidljiv u browseru treba ga "uglavit" u html5 <body> element putem ovog koda

[code]

document.body.appendChild(canvas);

[/code]

cisto radi informacije ,ako ste probali ovaj sav kod do sada prateci tutorijal i nakon kreacije canvas nije vidljiv na osvezenoj stranici nebrinite jer nismo mu dali niti pozadinu niti rubove pa je fakticki nevidljiv ali je tamo ,spreman za upotrebu

Welicak94

13.10.2017 u 20:06

Aj dalje

ICE

IcE

13.10.2017 u 20:19

da bi uspesno animirali bilo koji objekt na canvasu treba vam nesto zvano animation request koji daje instrukcije browseru

[code]
requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame;

[/code]

Slične teme:

Cranov muzički kutak. :D

Muzički kutak by FoX :)

Stare pesme su zakon :)

Omiljeni smajliji :)

JAVA xxx-foto galerija : Sisate

Forum početna