diff options
Diffstat (limited to 'files/tr/web/api/tuval_arabirimi/index.html')
| -rw-r--r-- | files/tr/web/api/tuval_arabirimi/index.html | 173 |
1 files changed, 173 insertions, 0 deletions
diff --git a/files/tr/web/api/tuval_arabirimi/index.html b/files/tr/web/api/tuval_arabirimi/index.html new file mode 100644 index 0000000000..f6a9a2f8d7 --- /dev/null +++ b/files/tr/web/api/tuval_arabirimi/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><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> |