Canvas

Canvas jest elementem języka HTML5, który wykorzystywany jest do tworzenia grafik "w locie", grafiki te tworzy się na canvasach czyli płótnach. Canvas pozawala na tworzenie obrazów z gradientów, krzywizn, linii czy napisów w różnych formach.

<canvas id="grafika" width="200" height="100"> <canvas>  - tworzenie okna canvas
<script>
var c=document.getElementById("grafika");        - odnajdywanie elementu canvas w DOM
var ctx=c.getContext("2d");                       - towrzenie kontekstu (2D)
Tutaj zawarte są metody do rysowania, wypełniania, kolorowania
<script>

Za pomocą Canvas można tworzyć napisy, napisy te mogą być "napisane" w różnych czcionkach, można je również wypełnić kolorami np: gradientami.

Do tworzenia canvasów konieczne jest najpierw stworzenie kontekstu np: 2D i dokumentu do którego będziemy się odwoływać.

ctx.font="40px Gabriola";                  - określenie wielkości i typ czcionki
var grd3=ctx.createLinearGradient(60,30,180,70);   - gradient liniowy jako tło X,Y,X1,Y1
grd3.addColorStop(0,"black");                 - określanie kolorów gradientu, 
grd3.addColorStop(0.5,"blue");
grd3.addColorStop(1,"red");
ctx.strokeStyle=grd3;              - kolorowanie krawędzi tekstu
ctx.strokeText("C a n v a s",70,30); 
            - tworzenie tekstu i określenie położenia współrzędnymi X,Y

Za pomocą Canvas można rysować ścieżki, wykorzystywać wzory matematyczne do tworzenia kół, krzywych, stworzone linie można kolorować, skalować, wypełniać.

 
ctx.fillStyle="black";        - wypełnianie powierzchni kolorem
ctx.strokeStyle="grey";           - kolorowanie krawędzi
ctx.lineWidth="3";          - szerokość prowadzonej linii
ctx.beginPath();          - tworzenie ścieżki
ctx.arc(189,65,1,0,2*Math.PI);         - metoda do rysowania kół czy łuków
ctx.moveTo(67,72);             - przesunięcie ścieżki bez tworzenia linii
ctx.lineTo(94,72);             - punkt, który łączy się z poprzednim tworząc linie
ctx.closePath();             - zamknięcie ścieżki
ctx.stroke();              - metoda "rysuj"
ctx.fill();             - metoda "wypełniaj"

Metody Canvas pozwalają na tworzenie gradientów np:liniowego z parametrami sprawiającymi, że rozchodzi się ukośnie, rozpoczynając od lewego górnego rogu, a kończąc na prawym dolnym.

 
ctx.scale(1.2,1.2);               - skalowanie płótna
var grd=ctx.createLinearGradient(20,30,200,150); - tworzenie gradientu liniowego X,Y,X1,Y1
grd.addColorStop(0,"blue");                  - kolory wypełniające gradient
grd.addColorStop(1,"white");
ctx.fillStyle=grd;                 - wypełnianie
ctx.fillRect(0,0,250,175); 
          - określenie za pomocą współrzędnych X,Y,X1,Y1 położenia gradientu

Do góry