Laboratorium Komputerowe Progmar
Marcin Załęczny

Na stronie używamy cookies. Korzystając z witryny wyrażasz zgodę na ich wykorzystywanie.      Zamknij

Element html-owy canvas

Element html-owy canvas umożliwia nam rysowanie na stronie html przy pomocy Javascriptu. Możemy tworzyć zarówno grafikę wektorową jak i rysować załadowane pliki graficzne - w całości lub ich wskazane fragmenty. Poniżej znajduje się wykaz dostępnych funkcji wraz z ich krótkim opisem. Generalnie aby coś narysować, należy pobrać wskaźnik na element canvas a następnie uzyskać wskaźnik na kontekst graficzny tego elementu, np (kod rysujący prostokąty):

function draw_rects() {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    ctx.fillStyle = "rgb(200,0,0)";
    ctx.fillRect (10, 10, 55, 50);

    ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
    ctx.fillRect (30, 30, 55, 50);
}

Wszystkie poniższe funkcje wywołujemy na elemencie ctx:

fillRect(x,y,width,height): Rysuje wypełniony kolorem prostokąt
strokeRect(x,y,width,height): Rysuje obramowanie prostokątu
clearRect(x,y,width,height): Czyści podany fragment canvasu
beginPath(): Rozpoczyna rysowanie ścieżki
closePath(): Kończy rysowanie ścieżki
stroke(): Rysuje linię wzdłuż ścieżki
fill(): Wypełnia ścieżkę kolorem
moveTo(x, y): Przenosi punkt rysowania do podanych współrzędnych
lineTo(x, y): Rysuje linię od bieżącej do podanej pozycji
arc(x, y, radius, startAngle, endAngle, anticlockwise): Rysuje łuk o podanych współrzędnych
quadraticCurveTo(cp1x, cp1y, x, y): Rysuje krzywą o podanych współrzędnych
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y): Rysuje krzywą Beziera o podanych współrzędnych
rect(x, y, width, height): Dodaje prostokątną ścieżkę do bieżącej ścieżki
drawImage(image, x, y): Rysuje na płótnie obrazek w podanych współrzędnych. Może to być: obrazek już istniejący (document.getElementById('img_id'), obrazek utworzony dynamicznie: new Image('/url/of/image'), inny już istniejący canvas: document.getElementById('other_canvas_id')
drawImage(image, x, y, width, height): Rysuje na płótnie obrazek w podanych współrzędnych i o podanych wymiarach (przeskalowany)
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight): Rysuje na płótnie obrazek lub jego fragment w podanych współrzędnych i o podanych wymiarach (przeskalowany)
ctx.mozImageSmoothingEnabled = false; Gecko 1.9.2 wprowadziło atrybut mozImageSmoothingEnabled elementu canvas, jeśli ma on wartość false, to obrazki nie będą wygładzane podczas skalowania. Domyślnie ma on wartość true.
ctx.fillStyle = color: Ustawienie koloru wypełniania, np: "orange", "#FFA500", "rgb(255,165,0)" or "rgba(255,165,0,1)"
ctx.strokeStyle = color: Ustawienie koloru krawędzi
ctx.globalAlpha = transparency: Ustawienie globalnej wartości przeźroczystości (mającej zastosowanie do wszystkich nowo rysowanych elementów graficznych). Może mieć wartość od 0.0 (pełna przeźroczystość) do 1.0 (brak przeźroczystości)
ctx.lineWidth = value: Ustawia grubość linii
ctx.lineCap = type: Ustawia typ początku i końca linii
ctx.lineJoin = type: Ustawia typ punktów łączenia linii w ścieżce
ctx.miterLimit = value:
var gradient = createLinearGradient(x1,y1,x2,y2): Tworzy gradient liniowy o podanych współrzędnych
var gradient = createRadialGradient(x1,y1,r1,x2,y2,r2): Tworzy gradient kulisty o podanych współrzędnych
gradient.addColorStop(position, color): Dodaje do gradientu stop-punkt o podanym kolorze
var pattern = createPattern(image,type): Tworzy tapetę z podanego obrazka
shadowOffsetX = float: Ustawia przesunięcie na osi X cienia dla nowo rysowanych obiektów
shadowOffsetY = float: Ustawia przesunięcie na osi Y cienia dla nowo rysowanych obiektów
shadowBlur = float: Ustawia stopień rozmycia cienia
shadowColor = color: Ustawia kolor cienia
fillText(text,x,y): Rysuje tekst na płutnie
save(): Zapamiętuje na stosie aktualny stan płótna
restore(): Pobiera stan płótna ze szczytu stosu i go przywraca
translate(x, y): Przesuwa płutno o podany wektor
rotate(angle): Obraca płutno o podany kąt
scale(x, y): Skaluje płutno wzdłuż osi x i y o podany współczynnik
translate(0,canvas.height); scale(1,-1): Po wykonaniu tych dwóch instrukcji otrzymamy dobrze znany Kartezjański system współrzędnych (o początku w lewym dolnym rogu)
transform(m11, m12, m21, m22, dx, dy): Transformuje płutno zgodnie z podanym współczynnikami macierzy przekształcenia
setTransform(m11, m12, m21, m22, dx, dy):
globalCompositeOperation = type: Ustawia typ pokrywania/przecinania się nachodzących na siebie kształtów
clip(): Funkcja służąca do podania obszaru wewnątrz, którego rysowane są kształty. Jeśli części tych kształtów wychodzą poza wskazany obszar, to są one obcinane.