JavaScript ile Tuval üzerinde çizin
Tüm JavaScript ile yapılmalıdır HTML tuval üzerine çizim:
Örnek
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script>
Kendin dene " 1. Adım: Tuval Eleman bul
Her şeyden önce, sen bulmalıdır <canvas> öğesi.
Bu HTML DOM yöntemi kullanılarak yapılır getElementById() :
var canvas = document.getElementById("myCanvas");
Adım 2: Bir çizim nesnesi oluşturun
İkincisi, Tuval için bir çizim nesnesi gerekir.
getContext() çizim özellikleri ve yöntemleri ile, dahili bir HTML nesnesidir:
var ctx = canvas.getContext("2d");
3. Adım: Tuval üzerinde çizin
Son olarak, tuval üzerine çizebilirsiniz.
kırmızı renk için çizim nesnesinin dolgu stilini ayarlayın:
ctx.fillStyle = "#FF0000";fillStyle özelliği CSS renk, bir degrade veya desen olabilir. Varsayılan fillStyle siyahtır.
fillRect( x,y,width,height ) yöntemi tuval üzerinde, dolgu tarzı ile dolu bir dikdörtgen çizer:
ctx.fillRect(0,0,150,75);