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
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.stroke();
:
Piirretään lintu
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let 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
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let 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ö
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let 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:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let 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:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let 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();
:
