1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
|
---
title: Tuval Arabirimi
slug: Web/API/Tuval_Arabirimi
tags:
- Arabirim
- Canvas
- Genel Bakış
- JavaScript
- Kaynak
- Tuval
translation_of: Web/API/Canvas_API
---
<div>{{CanvasSidebar}}</div>
<p class="summary"><span class="seoSummary">Tuval anlamına gelen canvas, <a href="/en-US/docs/HTML/HTML5">HTML5</a> de eklenmiştir, <strong>{{HTMLElement("canvas")}} adlı HTML ögesi </strong>JavaScript betikleriyle birlikte, çizge çizmek için kullanılabilir. Örneğin görsel işleyebilir, görselleri canlandırabilir, gerçek zamanlı izleti bile işleyebilirsiniz. </span></p>
<p>Mozilla uygulamaları Gecko 1.8 (bkz. <a href="/en-US/docs/Mozilla/Firefox/Releases/1.5">Firefox 1.5</a>) ile birlikte <code><canvas></code> desteği kazanmıştır. Öge, asıl olarak Apple tarafından OSX gösterge yüzeyinde ve Safari'de kullanılmıştır. Internet Explorer ise 9. sürümden sonra <code><canvas></code> desteklemeye başlamıştır; önceki sürümleri için Google'ın geliştirdiği <a href="https://github.com/arv/explorercanvas">Explorer Canvas</a> tasarısı <code><canvas></code> 'ın etkin kullanımına olanak tanıyordu. Google Chrome ve Opera 9'un da <code><canvas></code> desteği vardır.</p>
<p><a href="/en-US/docs/Web/WebGL">WebGL</a> de donanım tarafından hızlandırılmış 3 Boyutlu <a href="/tr/docs/Web/Guide/Çizgeler">Web Çizgeleri </a>çizmek için <code><canvas></code> ögesini kullanır. </p>
<h2 id="Örnek">Örnek</h2>
<p> {{domxref("CanvasRenderingContext2D.fillRect()")}} yöntemini kullanan ufak bir kod parçacığı:</p>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><canvas id="tuval"></canvas>
</pre>
<h3 id="JavaScript">JavaScript</h3>
<pre class="brush: js">var tuval = document.getElementById('tuval');
var bağlam = tuval.getContext('2d');
bağlam.fillStyle = 'green';
bağlam.fillRect(10, 10, 100, 100);
</pre>
<p>Aşağıdaki kodla oynayın ve tuvaldeki değişimleri canlı olarak görün.</p>
<div class="hidden">
<h6 id="Playable_code">Playable code</h6>
<pre class="brush: html"><canvas id="tuval" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
<input id="düzenle" type="button" value="Düzenle" />
<input id="sıfırla" type="button" value="Sıfırla" />
</div>
<textarea id="code" class="playable-code">
bağlam.fillStyle = 'green';
bağlam.fillRect(10, 10, 100, 100);</textarea>
</pre>
<pre class="brush: js">var tuval = document.getElementById('tuval');
var bağlam = tuval.getContext("2d");
var kodAlanı = document.getElementById('code');
var sıfırla = document.getElementById('sıfırla');
var düzenle = document.getElementById('düzenle');
var kod = kodAlanı.value;
function TuvaleÇiz() {
bağlam.clearRect(0, 0, tuval.width, tuval.height);
eval(kodAlanı.value);
}
sıfırla.addEventListener('click', function() {
kodAlanı.value = kod;
TuvaleÇiz();
});
düzenle.addEventListener('click', function() {
kodAlanı.focus();
})
kodAlanı.addEventListener('input', TuvaleÇiz);
window.addEventListener('load', TuvaleÇiz);
</pre>
</div>
<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
<h2 id="Atıflar">Atıflar</h2>
<div class="index">
<ul>
<li>{{domxref("HTMLCanvasElement")}}</li>
<li>{{domxref("CanvasRenderingContext2D")}}</li>
<li>{{domxref("CanvasGradient")}}</li>
<li>{{domxref("CanvasImageSource")}}</li>
<li>{{domxref("CanvasPattern")}}</li>
<li>{{domxref("ImageBitmap")}}</li>
<li>{{domxref("ImageData")}}</li>
<li>{{domxref("RenderingContext")}}</li>
<li>{{domxref("TextMetrics")}}</li>
<li>{{domxref("OffscreenCanvas")}}{{experimental_inline}}</li>
<li>{{domxref("Path2D")}} {{experimental_inline}}{{domxref("ImageBitmapRenderingContext")}}{{experimental_inline}}</li>
</ul>
</div>
<p><code>WebGLRenderingContext</code> ile ilgili atıflar <a href="/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a> altında verilmiştir.</p>
<p>{{domxref("CanvasCaptureMediaStream")}} de ilgilidir.</p>
<h2 id="Kılavuz_ve_yönergeler">Kılavuz ve yönergeler</h2>
<dl>
<dt><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas kılavuzu</a></dt>
<dd><code><canvas></code> ın hem temel hem de gelişmiş özelliklerini anlatan kapsayıcı bir kılavuz.</dd>
<dt><a href="/en-US/Add-ons/Code_snippets/Canvas">Kod Parçacıkları: Canvas</a></dt>
<dd><code><canvas></code> ile ilgili yazılmış kod parçacıkları...</dd>
<dt><a href="/en-US/docs/Web/API/Canvas_API/A_basic_ray-caster">Gösteri: Yalın ışıklandırma</a></dt>
<dd>Tuval kullanarak geliştirilmiş 3B ortamda görüş alanına göre ışıklandırma...</dd>
<dt><a href="/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas">Tuval üzerine DOM ögeleri çizmek</a></dt>
<dd>Belgede bulunan DOM ögeleri tuval üzerine çizimi.</dd>
<dt><a href="/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">canvas kullanarak görüntü işleme</a></dt>
<dd>{{HTMLElement("video")}} ve {{HTMLElement("canvas")}} ögelerini kullanarak izletideki görüntüyü canlı olarak işleme/değiştirme</dd>
</dl>
<h2 id="Kaynaklar">Kaynaklar</h2>
<h3 id="Kapsamlı">Kapsamlı</h3>
<ul>
<li><a href="http://joshondesign.com/p/books/canvasdeepdive/title.html">HTML5 Tuvaline Derinlemesine Dalmak</a></li>
<li><a href="http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html">Canvas(Tuval) El Kitabı </a></li>
</ul>
<h3 id="Kütüphaneler">Kütüphaneler</h3>
<ul>
<li><a href="http://fabricjs.com">Fabric.js</a> SVG işleme yeteneklerine iye, açık kaynaklı bir kütüphane.</li>
<li><a href="https://github.com/ericdrowell/KineticJS">Kinetic.js</a> masaüstü ve taşınabilir uygulamalardaki etkileşime odaklanmış açık kaynaklı tuval kütüphanesi.</li>
<li><a href="http://paperjs.org/">Paper.js</a> vektör çizgeleri için HTML5 tuvalin üzerinde çalışan betikleme çatısı.</li>
<li><a href="http://origamijs.com/docs/">Origami.js</a> hafif açık kaynaklı tuval kütüphanesi.</li>
<li><a href="http://libcanvas.github.com/">libCanvas</a> güçlü ve hafif, açık kaynaklı tuval çatısı.</li>
<li><a href="https://p5js.org/">p5.js </a>sanatçılar, eğitimciler ve yeni başlayanlar için çizim işlevselliği sunan tam donatılmış tuval kütüphanesi.</li>
<li><a href="http://processingjs.org">Processing.js</a> Processing görselleştime dilinin JS kütüphanesi.</li>
<li><a href="https://playcanvas.com/">PlayCanvas</a> açık kaynaklı oyun motoru.</li>
<li><a href="http://www.pixijs.com/">Pixi.js</a> açık kaynaklı oyun motoru.</li>
<li><a href="http://www.liquidx.net/plotkit/">PlotKit</a> çizge kütüphanesi.</li>
<li><a class="link-https" href="https://github.com/jeremyckahn/rekapi">Rekapi</a> tuval için canlandırma arabirimi.</li>
<li><a href="http://senchalabs.github.com/philogl/">PhiloGL</a> veri görselleştirme, yaratıcı kodlama ve oyun geliştirme için WebGL çatısı.</li>
<li><a href="http://thejit.org/">JavaScript InfoVis Araçkiti</a> Web için etkileşimli 2 boyutlu veri görselleştirmeleri yaratır.</li>
<li><a href="http://www.createjs.com/easeljs">EaselJS</a> oyun ve sanat için, tuval kullanımını kolaylaştıran açık kaynaklı/özgür kütüphanedir</li>
<li><a href="http://scrawl.rikweb.org.uk/">Scrawl-canvas</a> 2 boyutlu çizgeler oluşturmak, değiştirmek için tasarlanmış, açık kaynaklı bir başka kütüphanedir.</li>
<li><a href="https://www.patrick-wied.at/static/heatmapjs/">heatmap.js</a> açık kaynaklı, tuval üzerinde ısı haritaları oluşturmaya olanak tanıyan bir kütüphane.</li>
<li><a href="http://zimjs.com">ZIM</a> çatısı, tuval üzerinde yaratıcı kodlama için kolaylıklar, bileşenler ve denetim sunar. Erişilebilirlik ve yüzlerce renkli kılavuz da bunların içindedir.</li>
</ul>
<h2 id="Tanımlamalar">Tanımlamalar</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Tanım</th>
<th scope="col">Durum</th>
<th scope="col">Yorum</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '<canvas>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Ayrıca_bkz.">Ayrıca bkz.</h2>
<ul>
<li><a href="/en-US/docs/Web/WebGL">WebGL</a></li>
</ul>
|
