HTML Kanvas Çizimi
JavaScript ile Tuval Üzerine Çizin
HTML tuvalindeki tüm çizimler JavaScript ile yapılmalıdır:
Örnek
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>
Adım 1: Kanvas Öğesini Bulun
Her şeyden önce, <canvas> öğesini bulmalısınız.
Bu, HTML DOM yöntemi getElementById() kullanılarak yapılır:
var canvas = document.getElementById("myCanvas");
Adım 2: Bir Çizim Nesnesi Oluşturun
İkinci olarak, tuval için bir çizim nesnesine ihtiyacınız var.
getContext(), çizim için özellikleri ve yöntemleri olan yerleşik bir HTML nesnesidir:
var ctx = canvas.getContext("2d");
Adım 3: Tuval üzerine çizin
Son olarak, tuval üzerine çizebilirsiniz.
Çizim nesnesinin dolgu stilini kırmızı renge ayarlayın:
ctx.fillStyle = "#FF0000";
fillStyle özelliği bir CSS rengi, degrade veya desen olabilir. Varsayılan fillStyle siyahtır.
fillRect( x,y,width,height ) yöntemi, tuval üzerine dolgu stiliyle doldurulmuş bir dikdörtgen çizer:
ctx.fillRect(0, 0, 150, 75);