Desenați pe pânză cu JavaScript
Toate desen pe panza HTML trebuie sa fie facut cu JavaScript:
Exemplu
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script>
Încearcă - l singur » Pasul 1: Găsiți elementul canvas
În primul rând, trebuie să găsiți <canvas> element.
Acest lucru se face prin utilizarea metodei HTML DOM getElementById() :
var canvas = document.getElementById("myCanvas");
Pasul 2: Crearea unui obiect de desen
În al doilea rând, aveți nevoie de un obiect de desen pentru panza.
getContext() este un obiect HTML încorporat, cu proprietăți și metode de desen:
var ctx = canvas.getContext("2d");
Pasul 3: Desenați pe pânză
În cele din urmă, puteți desena pe panza.
Setați stilul de umplere a obiectului de desen la culoarea roșie:
ctx.fillStyle = "#FF0000";Proprietatea poate fi un stil de completare culoare CSS, un gradient sau un model. Valoarea implicită este negru stil de fișier.
fillRect( x,y,width,height ) metoda trage un dreptunghi, umplut cu stilul de umplere, pe pânză:
ctx.fillRect(0,0,150,75);