HTML5 - Canvas

Šta je Canvas?

HTML5 element canvas može se koristiti za crtanje grafike na web stranicama pomoću JavaScript. Canvas je prvobitno predstavio Apple za kontrolne ploče Mac OS-a i za pokretanje grafike u web pretraživaču Safari. Kasnije su ga usvojili Firefox, Google Chrome i Opera. Sada je canvas dio nove HTML5 specifikacije za web tehnologiju sljedeće generacije. Po defaultu element <canvas> ima 300px širine i 150px visine bez ikakvih boreder-a i sadržaja. Međutim, prilagođena širina i visina mogu se definisati pomoću CSS svojstva height i width, dok se granica (border) može primijeniti pomoću CSS svojstva border.


Crtanje staza i oblika na platnu

U ovome dijelu ćemo pobliže pogledati kako nacrtati osnovne staze i oblike pomoću novo predstavljenog HTML5 elementa canvas i JavaScript. Evo osnovnog primjera za crtanje staza i oblika na 2D HTML5 platnu. 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ugrađivanje Canvas u HTML stranice</title>
<style>
  canvas {
    border: 1px solid #000;
  }
</style>
<script>
    window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        // crtajte stvari ovdje
    };
</script>
</head>
<body>
    <canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>

Anonimna funkcija pridružena događaju window.onload izvršiće se kada se stranica učita. Nakon što se stranica učita, elementu platna možemo pristupiti metodom document.getElementById(). Kasnije smo definisali 2D kontekst platna prenošenjem 2D u metodu getContext() objekta canvas.


Crtanje linije

Najosnovnija putanja koju možete nacrtati na platnu je ravna linija. Najvažnije metode korištene u tu svrhu su: moveTo(), lineTo() i stroke(). Metoda moveTo() definiše položaj crtanja kursora na platnu, dok se metoda lineTo() koristi za definisanje koordinata krajnje tačke crte i na kraju metoda stroke() se koristi da linija postane vidljiva. Pogledajmo primjer: 

<script>
    window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.moveTo(50, 150);
        context.lineTo(250, 50);
        context.stroke();
    };
</script>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Crtanje linije na Canvas</title>
<style>
  canvas {
    border: 1px solid #000;
  }
</style>
<script>
    window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.moveTo(50, 150);
        context.lineTo(250, 50);
        context.stroke();
    };
</script>
</head>
<body>
    <canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>

Crtanje luka

Lukove možete kreirati metodom arc(). Sintaksa ove metode je sljedeća: 

context.arc(centerX, centerY, radius, startingAngle, endingAngle, counterclockwise);

JavaScript kod u sljedećem primjeru izvućiće luk na platnu. 

<script>
    window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.arc(150, 150, 80, 1.2 * Math.PI, 1.8 * Math.PI, false);
        context.stroke();
    };
</script>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Crtanje luka na Canvas</title>
<style>
  canvas {
    border: 1px solid #000;
  }
</style>
<script>
    window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.arc(150, 150, 80, 1.2 * Math.PI, 1.8 * Math.PI, false);
        context.stroke();
    };
</script>
</head>
<body>
    <canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>

Crtanje pravougaonika

Možete stvoriti pravougaonike i kvadratne oblike pomoću metode rect(). Ova metoda zahtijeva četiri parametra x, y položaj pravougaonika i njegovu širinu i visinu. Osnovna sintaksa metode rect() može se napisati kao: 

context.rect(x, y, width, height);

Sljedeći JavaScript kod nacrtaće oblik pravougaonika centriranog na platnu. 

<script>
  window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.rect(50, 50, 200, 100); 
        context.stroke();
    };
</script>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Crtanje pravougaonika na Canvas</title>
<style>
  canvas {
    border: 1px solid #000;
  }
</style>
<script>
    window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.rect(50, 50, 200, 100); 
        context.stroke();
    };
</script>
</head>
<body>
    <canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>

Crtanje kruga

Ne postoji posebna metoda za stvaranje kruga poput metode rect() za pravougaonika. Međutim, možete stvoriti potpuno zatvoreni luk, poput kruga, metodom arc(). Sintaksa za crtanje kompletnog kruga metodom arc() može se napisati kao: 

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

Sljedeći primjer prikazaće krug na platnu. 

<script>
  window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.arc(150, 100, 70, 0, 2 * Math.PI, false);
        context.stroke();
    };
</script>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Crtanje kruga na Canvas</title>
<style>
  canvas {
    border: 1px solid #000;
  }
</style>
<script>
    window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.arc(150, 100, 70, 0, 2 * Math.PI, false);
        context.stroke();
    };
</script>
</head>
<body>
    <canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>

Primjena stilova i boja na potez

Zadana boja poteza je crna, a debljina je 1px. Ali, možete postaviti boju i širinu linije koristeći svojstvo strokeStyle i lineWidth. Sljedeći primjer povućiće narandžastu liniju širine 5px. 

<script>
  window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.lineWidth = 5;
        context.strokeStyle = "orange";
        context.moveTo(50, 150);
        context.lineTo(250, 50);
        context.stroke();
    };
</script>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Postavljanje boje i širine poteza na Canvas</title>
<style>
  canvas {
    border: 1px solid #000;
  }
</style>
<script>
    window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.lineWidth = 5;
        context.strokeStyle = "orange";
        context.moveTo(50, 150);
        context.lineTo(250, 50);
        context.stroke();
    };
</script>
</head>
<body>
    <canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>

Takođe možete postaviti stil kapice za linije pomoću svojstva lineCap. Na raspolaganju su tri stila za kapice linija: butt, round i square. Pogledajmo primjer: 

<script>
  window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.lineWidth = 10;
        context.strokeStyle = "orange";
        context.lineCap = "round";
        context.arc(150, 150, 80, 1.2 * Math.PI, 1.8 * Math.PI, false);
        context.stroke();
    };
</script>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Postavljanje stila kapice na platnu</title>
<style>
  canvas {
    border: 1px solid #000;
  }
</style>
<script>
    window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.lineWidth = 10;
        context.strokeStyle = "orange";
        context.lineCap = "round";
        context.arc(150, 150, 80, 1.2 * Math.PI, 1.8 * Math.PI, false);
        context.stroke();
    };
</script>
</head>
<body>
    <canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>

Ispunjavanje boja unutar oblika platna

Takođe možete ispuniti boju unutar oblika platna metodom fillStyle(). Sljedeći primjer će vam pokazati kako da ispunite jednobojnom bojom unutrašnjost pravougaonika. 

<script>
  window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.rect(50, 50, 200, 100); 
        context.fillStyle = "#FB8B89";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();
    };
</script>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ispunjavanje boje unutar pravougaonika na Canvas</title>
<style>
  canvas {
    border: 1px solid #000;
  }
</style>
<script>
    window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.rect(50, 50, 200, 100); 
        context.fillStyle = "#FB8B89";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();
    };
</script>
</head>
<body>
    <canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>

Slično tome, metodu fillStyle() možete koristiti i za popunjavanje pune boje unutar kruga. 

<script>
  window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.arc(150, 100, 70, 0, 2 * Math.PI, false);
        context.fillStyle = "#FB8B89";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();
    };
</script>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Boja za punjenje unutar kruga na Canvas</title>
<style>
  canvas {
    border: 1px solid #000;
  }
</style>
<script>
    window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.arc(150, 100, 70, 0, 2 * Math.PI, false);
        context.fillStyle = "#FB8B89";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();
    };
</script>
</head>
<body>
    <canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>

Ispunjavanje gradijentnih boja unutar oblika platna

Takođe možete ispuniti gradijentnu boju unutar oblika platna. Gradijent je samo gladak vizuelni prelazak iz jedne boje u drugu. Dostupne su dvije vrste gradijenta - linearni i radijalni. Osnovna sintaksa za stvaranje linearnog gradijenta može se napisati kao: 

var grd = context.createLinearGradient(startX, startY, endX, endY);

Sljedeći primjer koristi metodu createLinearGradient() za popunjavanje boje linearnog gradijenta unutar pravougaonika. Isprobajmo sljedeći primjer kako bismo shvatili kako to u osnovi funkcioniše: 

<script>
  window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.rect(50, 50, 200, 100); 
        var grd = context.createLinearGradient(0, 0, canvas.width, canvas.height);
        grd.addColorStop(0, '#8ED6FF');   
        grd.addColorStop(1, '#004CB3');
        context.fillStyle = grd;
        context.fill();
        context.stroke();
    };
</script>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ispunjavanje linearnog gradijenta unutar oblika Canvas</title>
<style>
  canvas {
    border: 1px solid #000;
  }
</style>
<script>
    window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.rect(50, 50, 200, 100); 
        var grd = context.createLinearGradient(0, 0, canvas.width, canvas.height);
        grd.addColorStop(0, '#8ED6FF');   
        grd.addColorStop(1, '#004CB3');
        context.fillStyle = grd;
        context.fill();
        context.stroke();
    };
</script>
</head>
<body>
    <canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>

Slično tome, oblike platna možete ispuniti radijalnim gradijentom pomoću metode createRadialGradient(). Osnovna sintaksa za stvaranje radijalnog gradijenta može se napisati kao: 

var grd = context.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius);

Sljedeći primjer koristi metodu createRadialGradient() za popunjavanje radijalne boje gradijenta unutar kruga. Isprobajmo sljedeći primjer kako biste shvatili kako to zapravo funkcioniše: 

<script>
  window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.arc(150, 100, 70, 0, 2 * Math.PI, false);
        var grd = context.createRadialGradient(150, 100, 10, 160, 110, 100);
        grd.addColorStop(0, '#8ED6FF');   
        grd.addColorStop(1, '#004CB3');
        context.fillStyle = grd;
        context.fill();
        context.stroke();
    };
</script>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ispunjavanje radijalnog gradijenta unutar oblika Canvas</title>
<style>
  canvas {
    border: 1px solid #000;
  }
</style>
<script>
    window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.arc(150, 100, 70, 0, 2 * Math.PI, false);
        var grd = context.createRadialGradient(150, 100, 10, 160, 110, 100);
        grd.addColorStop(0, '#8ED6FF');   
        grd.addColorStop(1, '#004CB3');
        context.fillStyle = grd;
        context.fill();
        context.stroke();
    };
</script>
</head>
<body>
    <canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>

Crtanje teksta na platnu

Možete crtati i tekst na platnu. Ovi tekstovi mogu da sadrže bilo koje Unicode znakove. Sljedeći primjer će izvući jednostavnu pozdravnu poruku "IT TUTORIJALI!" na platnu. 

<script>
  window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.font = "bold 32px Arial";
        context.fillText("IT TUTORIJALI!", 50, 100);
    };
</script>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Crtanje teksta na Canvas</title>
<style>
  canvas {
    border: 1px solid #000;
  }
</style>
<script>
    window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.font = "bold 32px Arial";
        context.fillText("IT TUTORIJALI!", 50, 100);
    };
</script>
</head>
<body>
    <canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>

Možete dodatno postaviti boju i poravnanje teksta na platnu, ovako: 

<script>
  window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.font = "bold 32px Arial";
        context.textAlign = "center";
        context.textBaseline = "middle";
        context.fillStyle = "orange";
        context.fillText("IT TUTORIJALI!", 150, 100);
    };
</script>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Postavljanje boje i poravnanja teksta na Canvas</title>
<style>
  canvas {
    border: 1px solid #000;
  }
</style>
<script>
    window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.font = "bold 32px Arial";
        context.textAlign = "center";
        context.textBaseline = "middle";
        context.fillStyle = "orange";
        context.fillText("IT TUTORIJALI!", 150, 100);
    };
</script>
</head>
<body>
    <canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>

Na tekst možete primijeniti i potez pomoću metode strokeText(). Ova metoda će obojiti obod teksta, umjesto da ga popuni. Međutim, ako želite postaviti i ispunu i potez na tekstu platna, možete zajedno koristiti metode fillText() i strokeText(). 

<script>
  window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.font = "bold 32px Arial";
        context.textAlign = "center";
        context.textBaseline = "middle";
        context.strokeStyle = "orange";
        context.strokeText("IT TUTORIJALI!", 150, 100);
    };
</script>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dodavanje poteza u tekst Canvas</title>
<style>
  canvas {
    border: 1px solid #000;
  }
</style>
<script>
    window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.font = "bold 32px Arial";
        context.textAlign = "center";
        context.textBaseline = "middle";
        context.strokeStyle = "orange";
        context.strokeText("IT TUTORIJALI!", 150, 100);
    };
</script>
</head>
<body>
    <canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>