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?