HTML <canvas> öğesi bir web sayfasında grafik çizmek için kullanılır.
Soldaki grafik oluşturulur <canvas> . kırmızı dikdörtgen, bir gradyan dikdörtgen, çok renkli bir dikdörtgen ve bir renkli metin: Dört elemanlarını göstermektedir.
HTML nedir Canvas ?
HTML <canvas> öğesi komut dosyası aracılığıyla anında, grafik çizmek için kullanılır (usually JavaScript) .
<canvas> öğesi grafikler için sadece bir kapsayıcıdır. Aslında grafik çizmek için bir komut dosyası kullanmalısınız.
Canvas yolları, kutular, daireler, metin, çizim ve resimler ekleyerek için çeşitli yöntemler vardır.
Tarayıcı Desteği
Tablodaki rakamlar tamamen destekleyen ilk tarayıcı sürümü belirtmek <canvas> öğesi.
| Eleman | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Canvas Örnekler
Bir canvas bir HTML sayfasında bir dikdörtgen alandır. Varsayılan olarak, bir canvas hiçbir sınır ve içerik yok.
biçimlendirme şöyle görünür:
<canvas id="myCanvas" width="200" height="100"></canvas>
Note: her zaman bir kimlik niteliğini belirtmek (to be referred to in a script) , ve bir genişlik ve yükseklik boyutunu belirlemek için nitelik canvas .
Bir kenarlık eklemek için kullanın style niteliğini:
Temel Canvas Örneği
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid
#000000;">
</canvas>
Kendin dene " JavaScript ile Çizim
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75); Kendin dene " Bir çizgi çiz
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke(); Kendin dene " Bir çember çiz
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke(); Kendin dene " Bir Metin çizin
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50); Kendin dene " İnme Metin
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50); Kendin dene " Lineer Gradient çizin
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); Kendin dene " Dairesel Gradient çizin
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); Kendin dene " Resmi Çiz
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,10,10); Kendin dene " HTML Canvas Eğitimi
HTML hakkında tüm bilgi edinmek için <canvas> , bizim tam HTML edin Canvas Eğitimi .