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?