Postavljanje platna

<canvas id=“platno“ width=“300“ height=“300“></canvas>

  • U HTML datoteci definiran je okvir ili „prazan papir“ unutar kojeg crtamo pomoću JS-a.

  • Canvas kontekst je objekt koji sadrži svojstva i metode koji se mogu koristiti za iscrtavanje grafike unutar HTML5 <canvas> elementa.

  • Svaki <canvas> element može imati najviše jedan kontekst.

  • <canvas> element ima DOM (Document Object Model) metodu getContext() koja se koristi za dobivanje konteksta i funkcija za crtanje.

  • getContext() ima jedan parametar – tip konteksta, koji može biti 2D ili 3D.

Pristup elementu putem njegovog id –a i njegovom kontekstu preko getContext() metode:

var ctx = document.getElementById(‘platno’).getContext(‘2d’);

Crveni kvadrat ispod plavog kvadrata - HTML canvas

 

 

 

 

 

 

 

 

 

 

 

 

HTML kôd

 

 

 

 

 

 

 

JavaScript kôd

 

 

 

 

 

 

 

Funkcija draw() uzima canvas element i dobiva 2d kontekst. Objekt ctx tada može biti korišten za ostvarivanje prikaza canvas -a.

Uvod                                                                                                                                                                                                                   Koordinatni sustav

Skip to content