Canvas – rysowanie w Pythonie

Co to jest canvas?

Canvas to wirtualna "kartka", dzięki której możemy w oknie przeglądarki rysować figury geometryczne, linie, teksty i obrazki za pomocą kodu Pythona. To bardzo praktyczne narzędzie do nauki matematyki, programowania i prezentowania schematów czy ilustracji w edukacji.

Co możemy osiągnąć na canvasie?

Rysowanie dowolnych figur: kwadraty, prostokąty, koła, trójkąty, trapezy, romby.
Dodawanie opisów, wzorów i tekstów przy figurach.
Pokazywanie własności geometrycznych – wysokości, promienie, przekątne.
Tworzenie interaktywnych ćwiczeń matematycznych.
Rozwijanie umiejętności programistycznych.

Jak rozpocząć program?

Uwaga! Każdy program korzystający z rysowania na canvasie powinien rozpoczynać się od polecenia:

import canvas

Podstawowe polecenia wrappera canvas

Czyszczenie całego canvasu:

canvas.clearRect(0, 0, 760, 560)

Ustawienie koloru wypełnienia:

canvas.fillStyle('red')         # kolor nazwą
canvas.fillStyle('#00ff00')     # kolor kodem HEX

Kolor linii obwodowej:

canvas.strokeStyle('black')

Grubość linii:

canvas.setLineWidth(4)

Czcionka dla tekstu:

canvas.setFont("20px Arial")

Rysowanie wypełnionego prostokąta:

canvas.fillRect(50, 40, 120, 90)

Rysowanie obwódki prostokąta:

canvas.strokeRect(50, 40, 120, 90)

Rozpoczęcie rysowania ścieżki/figury (np. trójkąt):

canvas.beginPath()

Pozycja "pióra" (start figury):

canvas.moveTo(60, 60)

Rysowanie linii do punktu:

canvas.lineTo(120, 60)

Zamknięcie figury:

canvas.closePath()

Wypełnienie figury:

canvas.fill()

Obwódka figury:

canvas.stroke()

Rysowanie okręgu:

canvas.arc(200, 150, 60, 0, 2 * math.pi)

Wstawianie tekstu na canvasie:

canvas.fillText("Napis na canvasie", 150, 300)

Demo: Kwadrat z opisem

import canvas

canvas.clearRect(0, 0, 760, 560)
canvas.fillStyle('lightblue')
canvas.fillRect(100, 100, 200, 200)
canvas.strokeStyle('black')
canvas.setLineWidth(3)
canvas.strokeRect(100, 100, 200, 200)
canvas.setFont("20px Arial")
canvas.fillStyle('yellow')
canvas.fillText("a", 200, 320)
canvas.fillText("Pole = a²", 160, 350)

Demo: Trójkąt z opisem

import canvas

canvas.beginPath()
canvas.moveTo(100, 400)
canvas.lineTo(200, 200)
canvas.lineTo(300, 400)
canvas.closePath()
canvas.fillStyle('orange')
canvas.fill()
canvas.strokeStyle('black')
canvas.stroke()
canvas.setFont("18px Arial")
canvas.fillStyle('white')
canvas.fillText("Pole = ½ × a × h", 160, 420)
canvas.setFont("16px Arial")
canvas.fillText("a – bok, h – wysokość", 155, 445)

Ładowanie obrazka w canvas

Opis:
Pozwala wyświetlić dowolny obraz (np. zdjęcie, ilustrację, logo) na canvasie w wybranym miejscu. Do dyspozycji są dwa polecenia:

await canvas.loadAndDrawImage(url)
– Ładuje obraz z podanego adresu URL i umieszcza go w domyślnej pozycji (najczęściej w lewym górnym rogu, oryginalny rozmiar).
await canvas.loadAndDrawImageScaled(url, x, y, szerokość, wysokość)
– Ładuje obraz, ustawia go w punkcie (x, y), i rysuje w zadanym rozmiarze na canvasie.

Polecenia wymagają użycia słowa await (program czeka na wczytanie obrazka).

Przykład użycia:

# Załaduj obraz w oryginalnym rozmiarze
await canvas.loadAndDrawImage("grafika13.jpg")

# Załaduj i narysuj obraz w punkcie (50, 50), rozmiar: 320x240 px
await canvas.loadAndDrawImageScaled("grafika13.jpg", 50, 50, 320, 240)

Gdzie:

url – adres grafiki
x, y – lewy górny róg obrazka na canvasie
szerokość, wysokość – rozmiar wyświetlanego obrazka

Demo: Ładowanie obrazka

import canvas

# Czyścimy canvas
canvas.clearRect(0, 0, 760, 560)

# Ładujemy i rysujemy obrazek w lewym górnym rogu (100x100 px)
await canvas.loadAndDrawImage("img/pic1.jpg")
await canvas.loadAndDrawImageScaled("img/pic2.jpg", 50, 50, 320, 240)