HTML Canvas koordinaatit
- Edellinen sivu Canvas piirrä
- Seuraava sivu Canvas viiva
Kurssivinkki:
Kaavion koordinaatit
HTML kaavio on kaksisuuntainen ruudukko.
Viivakaavion vasemmalta ylältä olevat koordinaatit ovat (0,0).
Tarkoittaa: aloita piirtäminen vasemmalta ylältä (0,0) 150x75 pikselin nelikulmion kanssa.
Koordinaatit esimerkki
Pysähdy hiiren osoittimella alla olevaan nelikulmioon, nähdäksesi sen x ja y koordinaatit:
Piirrä viiva
Piirrä suora alla olevilla menetelmillä:
- moveTo(x,y) - Määritä viivan lähtökohta
- lineTo(x,y) - Määritä viivan päätepiste
Todellisen viivan piirtämiseen sinun on käytettävä yhtä maalivärimenetelmistä, kuten stroke().
Esimerkki
Määritä lähtökohta (0,0) sijaintiin, määritä päätepiste (200,100). Sitten käytä stroke() metodia todelliseen viivan piirtämiseen:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
Piirrä ympyrä
Piirrä ympyrä alla olevilla menetelmillä:
- beginPath() - Aloita polku
- arc(x,y,r,startangle,endangle) - Luo ympyräkaari/käyrä
Luo ympyrä arc() -funktiolla: aseta alkukulma 0, loppukulma 2 * Math.PI. x ja y parametrit määrittävät ympyrän keskikohdan x ja y koordinaatit. r parametri määrittää ympyrän säteen.
Esimerkki
Käytä arc() funktiota määrittääksesi ympyrän. Sitten käytä stroke() metodia ympyrän todelliseen piirtämiseen:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
Katso myös:
- Edellinen sivu Canvas piirrä
- Seuraava sivu Canvas viiva
