Viivojen piirtäminen canvasin avulla JavaScriptillä

Aloitetaan yksinkertaisesta - viivojen piirtämisestä. Ymmärtääksesi kuinka se tehdään, kuvittele, että sinulla on paperiarkki ja kynä. Voit piirtää tälle paperille, tai voit siirtää kynää haluttuun kohtaan piirtämättä.

JavaScript toimii samalla tavalla: sillä on kynä (tai piirtokynä), ja voit siirtää sitä haluttuun paikkaan käyttämällä metodia moveTo, ja piirtää - käyttämällä metodia lineTo.

Molemmat metodit ottavat parametreina pisteen, johon kynän kärki siirretään - ensimmäinen parametri on x-koordinaatti ja toinen on y-koordinaatti. Koordinaattien origo - piste 0, 0 - on elementin vasen yläkulma.

Kun kynä siirretään haluttuun pisteeseen - metodi moveTo vain siirtää, kun taas lineTo piirtää siirron aikana viivan kynän nykyisestä sijainnista pisteeseen, johon se siirtyy.

Kuitenkin, jos yllä oleva koodi suoritetaan - mitään ei tapahdu: on kirjoitettava kaksi komentoa lisää: ensimmäinen komento beginPath tulee antaa ennen viivan piirtämisen aloittamista, ja toinen komento stroke tulee kutsua kaikkien moveTo ja lineTo -yhdistelmien jälkeen, jotta viiva piirtyy.

Joten, kirjoitetaan toimiva koodi viivan piirtämiseksi:

Piirretään viiva

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.stroke();

Результат:

Piirretään lintu

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.stroke();

Результат:

Piirretään kolmio

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.lineTo(50, 50);
ctx.stroke();

Результат:

Piirretään neliö

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.closePath();
ctx.stroke();

Результат:

Kuvioiden sulkeminen

Suljetun kuvion piirtämiseen ei ole välttämätöntä piirtää kaikkia viivoja - viimeinen viiva voidaan piirtää automaattisesti ja sulkea kuvio. Tätä varten tulee ennen metodia stroke kutsua metodia closePath.

Tämä metodi yrittää sulkea kuvion piirtämällä suoran viivan loppupisteestä alkupisteeseen. Jos kuvio on jo suljettu tai on vain yksittäinen piste, metodi ei tee mitään.

Piirretään kolmio käyttämällä closePath:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
//ctx.lineTo(50, 50); - jätämme tämän vaiheen pois
ctx.closePath();
ctx.stroke();

Результат:

Kuvioiden täyttäminen

Metodin stroke sijasta voidaan käyttää metodia fill - tällöin kuvion ei välttämättä tarvitse olla täysin suljettu - se täytetään myös näin:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
//ctx.lineTo(50, 50); - jätämme tämän vaiheen pois
//ctx.closePath(); - ja tämän myös
ctx.fill();

Результат:

Käytännön tehtävät