From 8f2731905212f6e7eb2d9793ad20b8b448c54ccf Mon Sep 17 00:00:00 2001
From: Florian Merz <me@fiji-flo.de>
Date: Thu, 11 Feb 2021 14:51:31 +0100
Subject: unslug tr: move

---
 files/tr/web/api/canvas_api/index.html | 173 +++++++++++++++++++++++++++++++++
 1 file changed, 173 insertions(+)
 create mode 100644 files/tr/web/api/canvas_api/index.html

(limited to 'files/tr/web/api/canvas_api/index.html')

diff --git a/files/tr/web/api/canvas_api/index.html b/files/tr/web/api/canvas_api/index.html
new file mode 100644
index 0000000000..f6a9a2f8d7
--- /dev/null
+++ b/files/tr/web/api/canvas_api/index.html
@@ -0,0 +1,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>&lt;canvas&gt;</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>&lt;canvas&gt;</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>&lt;canvas&gt;</code> 'ın etkin kullanımına olanak tanıyordu. Google Chrome ve Opera 9'un da <code>&lt;canvas&gt;</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>&lt;canvas&gt;</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">&lt;canvas id="tuval"&gt;&lt;/canvas&gt;
+</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">&lt;canvas id="tuval" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="düzenle" type="button" value="Düzenle" /&gt;
+  &lt;input id="sıfırla" type="button" value="Sıfırla" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+bağlam.fillStyle = 'green';
+bağlam.fillRect(10, 10, 100, 100);&lt;/textarea&gt;
+</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>&lt;canvas&gt;</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>&lt;canvas&gt;</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', '&lt;canvas&gt;')}}</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>
-- 
cgit v1.2.3-54-g00ecf