2

kurs

html

Lekcja 18: Canvas

html

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
comments powered by Disqus

Do góry