HTML Kanvas Grafikleri
HTML <canvas>
öğesi, bir web sayfasında grafik çizmek için kullanılır.
Soldaki grafik ile oluşturulur <canvas>
. Dört öğe gösterir: kırmızı bir dikdörtgen, bir degrade dikdörtgen, çok renkli bir dikdörtgen ve çok renkli bir metin.
HTML Kanvas nedir?
HTML <canvas>
öğesi, JavaScript aracılığıyla anında grafik çizmek için kullanılır.
<canvas>
Öğe yalnızca grafikler için bir kapsayıcıdır . Grafikleri gerçekten çizmek için JavaScript kullanmalısınız.
Canvas, yollar, kutular, daireler, metin çizmek ve resim eklemek için çeşitli yöntemlere sahiptir.
Tarayıcı Desteği
Tablodaki sayılar,
<canvas>
öğeyi tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
Element | |||||
---|---|---|---|---|---|
<canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Tuval Örnekleri
Tuval, bir HTML sayfasındaki dikdörtgen bir alandır. Varsayılan olarak, bir tuvalin kenarlığı ve içeriği yoktur.
İşaretleme şöyle görünür:
<canvas id="myCanvas" width="200" height="100"></canvas>
Not: Her zaman bir id
öznitelik (bir komut dosyasında atıfta bulunulacak) ve tuvalin boyutunu tanımlamak için bir width
ve özniteliği belirtin. height
Kenarlık eklemek için style
özniteliği kullanın.
İşte temel, boş bir tuval örneği:
Örnek
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid
#000000;">
</canvas>
JavaScript ekle
Dikdörtgen tuval alanını oluşturduktan sonra, çizimi yapmak için bir JavaScript eklemelisiniz.
İşte bazı örnekler:
Bir çizgi çiz
Örnek
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>
Bir Daire çizin
Örnek
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>
Metin Çiz
Örnek
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
</script>
Kontur Metni
Örnek
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
</script>
Doğrusal Gradyan Çiz
Örnek
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>
Dairesel Gradyan Çiz
Örnek
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>
Resim çiz
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
</script>
HTML Tuval Eğitimi
Hakkında daha fazla bilgi edinmek için <canvas>
lütfen HTML Kanvas Eğitimimizi okuyun .