HTML5 Canvas

HTML5 platna : Canvas

HTML5 <canvas> element omogućava nam pomoću JavaScripta crtanje različitih oblika, dodavanje slika, kreiranje animacija na web stranici.
Na platnu to ne radimo korištenjem novog jezika (kao što je to slučaj u SVG) ili korištenjem Flasha.

Želimo li crtati na platnu trebamo definirati element sa svojstvima visine i širine, dodati identifikator kako bi pristupili elementu putem JavaScripta:

<canvas width="800" height="600" id="canvas1">
</canvas>	

Crtanje pravokutnika

fillRect() – crtanje popunjenih pravokutnika 

strokeRect() – crtanje okvira oko pravokutnika

clearRect() – načini prazan, proziran pravokutni oblik

Boja ispune i obruba

<canvas> element crta samo crno-bijelo dok se ne definira boja ispune i boja obruba.

fillStyle – boja ispune

strokeStyle – boja obruba

Primjer crtanja pravokutnika

function drawSquare() {
  var canvas = document.getElementById("canvas1");
  var context = canvas.getContext("2d"); 
     
  context.fillStyle="rgb(255,0,0)";
  context.fillRect(100,100,300,300);
  context.strokeRect(150,150,200,200);
  context.clearRect(200,200,100,100);
  }

Crtanje poligona i crta

beginPath() - metoda kreira putanju na platnu

closePath() - metoda povlači crtu između trenutne točke i polazne točke.

stroke() - crta obrub oko putanje

fill() - popunjava sadržaj unutar putanje

moveTo() - ne crta ništa nego pomiče točku crtanja na novo mjesto.

Crtanje sinusoide

for (i=0; i<2*Math.PI; i=i+0.04)
{
    context.beginPath();
    context.moveTo(10+100*i,200);
    context.lineTo(10+100*i,200-200*Math.sin(i));
    context.closePath();
    context.strokeStyle="blue";
    context.stroke();               
}

draw() svakih 10 ms

function drawSquare () {
                      
      i = 0;
      window.setInterval(function() {
         i = draw(i);
      }, 10);
  }

Crtanje sinusoide

function draw(i) {
 contxt.beginPath();
 contxt.moveTo(200+100*Math.cos(i),200+100*Math.sin(i));
 contxt.lineTo(200+100*Math.sin(i),200-100*Math.cos(i));
 contxt.lineTo(200-100*Math.cos(i),200-100*Math.sin(i));
 contxt.lineTo(200-100*Math.sin(i),200+100*Math.cos(i));
 contxt.lineTo(200+100*Math.cos(i),200+100*Math.sin(i));
 contxt.strokeStyle="rgb(0,255,0)";
 contxt.stroke();  
 return(i+0.01); }

Zadatak: nacrtajte crtež

Hvala na pozornosti!

Pitanja?