Canvas

Canvas dostarcza szereg nowych możliwości w urozmaicaniu strony internetowej o nowe elementy. Może posłużyć m.in. do tworzenia grafiki, kształtów, wykresów, animacji, gier.

Linia

<canvas id="linia" width="300" height="200"></canvas>

<script>
var c=document.getElementById("linia");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(50,30);
ctx.lineTo(250,150);
ctx.strokeStyle="red";
ctx.stroke();
</script>

Gdzie:

• beginPath – początek rysowania
• moveTo – punkt wyznaczający początek linii
• lineTo – punkt wyznaczający koniec linii
• stroke – punkt wyznaczający koniec linii
• strokeStyle – kolor
• stroke – rozpoczęcie rysowania

Przykład

Okrąg

<canvas id="okrag" width="300" height="150"></canvas>

<script>
var c=document.getElementById("okrag");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(180,80,65,0,10*Math.PI);
ctx.strokeStyle="blue";
ctx.stroke();
</script>

Gdzie:

• arc – współrzędne środka x,y, promień, początkowy i końcowy kąt promienia

Przykład

Prostokąt

<canvas id="prostokat" width="300" height="210"></canvas>

<script>
var c=document.getElementById("prostokat");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.rotate(Math.PI / 30);
ctx.rect(30, 20, 250, 150);
ctx.fillStyle="gray";
ctx.fill();
ctx.lineWidth=5;
ctx.strokeStyle="red";
ctx.stroke();
</script>

Gdzie:

• rotate – obrót
• rect – położenie względem lewej i prawej krawędzi, szerokość, wysokość
• fillStyle – kolor wypełnienia
• rect – położenie względem lewej i prawej krawędzi, szerokość, wysokość
• lineWidth – grubość linii

Przykład

Gradient

<canvas id="gradient" width="300" height="170"></canvas>

<script>
var c=document.getElementById("gradient");
var ctx=c.getContext("2d");
var gradient = ctx.createLinearGradient(0, 0, 400, 0);
gradient.addColorStop(0, "yellow");
gradient.addColorStop(1, "lime");
ctx.fillStyle = gradient;
ctx.fillRect(20, 20, 300, 140);
</script>

Gdzie:

• createLinearGradient – gradient liniowy
• addColorStop – kolor początkowy
• addColorStop – kolor końcowy
• shadowBlur – rozmycie cienia
• fillRectrect – położenie względem lewej i prawej krawędzi, szerokość, wysokość

Przykład

Tekst

<canvas id="tekst" width="80" height="150"></canvas>

<script>
var c=document.getElementById("tekst");
var ctx=c.getContext("2d");
ctx.font = "35px Tahoma";
ctx.shadowColor = "#888";
ctx.shadowBlur = "15";
ctx.fillText("Kurs HTML CSS", 10, 50);
</script>

Gdzie:

• rect – położenie względem lewej i prawej krawędzi, szerokość, wysokość
• fillStyle – kolor wypełnienia
• shadowColor – kolor cienia
• shadowBlur – rozmycie cienia
• fillText – tekst, położenie względem lewej i prawej krawędzi

Przykład