HTML5 Canvas
- Önceki Sayfa HTML Input Formu Özellikleri
- Sonraki Sayfa HTML5 SVG
Canvas elementi, web sayfalarında grafik çizmek için kullanılır.
Canvas nedir?
HTML5 canvas elementi, web sayfalarında JavaScript ile resim çizmek için kullanılır.
Çizim tablosu, her bir pikseli kontrol edebileceğiniz bir矩 shapedir.
Canvas, çeşitli çizim yolları, düzengon, daire, karakter ve resim eklemek için yöntemlere sahiptir.
Canvas elementi oluşturma
HTML5 sayfasına canvas elementi ekleyin.
Elemanın id'sini, genişliğini ve yüksekliğini belirtin:
<canvas id="myCanvas" width="200" height="100"></canvas>
JavaScript ile çizim yapma
canvas elementi kendi kendine çizim yeteneğine sahiptir. Tüm çizim işlemleri JavaScript içersinde tamamlanmalıdır:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
JavaScript, canvas element'ı bulmak için id kullanır:
var c=document.getElementById("myCanvas");
Then, create the context object:
var cxt=c.getContext("2d");
The "getContext("2d")" object is a built-in HTML5 object that has various methods for drawing paths, rectangles, circles, characters, and adding images.
The following two lines of code draw a red rectangle:
cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75);
The fillStyle method colors it red, and the fillRect method specifies the shape, position, and size.
Understanding Coordinates
The fillRect method has the parameters (0,0,150,75).
That means: Draw a 150x75 rectangle on the canvas, starting from the top left corner (0,0).
As shown in the figure below, the X and Y coordinates of the canvas are used to position the drawing on the canvas.
More Canvas Examples
The following are more examples of drawing on the canvas element:
Example - Line
Draw a line by specifying where it starts and ends:
JavaScript Kodu:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>
canvas elementi:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Tarayıcınız canvas elementini desteklemiyor. </canvas>
Example - Circle
Draw a circle by specifying size, color, and position:
JavaScript Kodu:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>
canvas elementi:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Tarayıcınız canvas elementini desteklemiyor. </canvas>
Example - Gradient
With the color you specify, draw a gradient background:
JavaScript Kodu:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>
canvas elementi:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Tarayıcınız canvas elementini desteklemiyor. </canvas>
Örnek - Resim
Bir resmi kanvas üzerine yerleştirin:
JavaScript Kodu:
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
};
</script>
canvas elementi:
<canvas id="myCanvas" width="244" height="182" style="border:1px solid #d3d3d3;"> Tarayıcınız HTML5 canvas etiketini desteklemiyor. </canvas>
HTML Canvas Eğitimi
Kanvas hakkında daha fazla bilgi öğrenmek için sitemizi ziyaret edin: HTML Canvas Eğitimi.
- Önceki Sayfa HTML Input Formu Özellikleri
- Sonraki Sayfa HTML5 SVG
