HTML Canvas - W3bai

❮ Önceki Sonraki Bölüm ❯ Tarayıcınız desteklemiyor <canvas> öğesi.

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 .

❮ Önceki Sonraki Bölüm ❯