diff options
Diffstat (limited to 'files/tr/web/api/canvas_api/index.html')
| -rw-r--r-- | files/tr/web/api/canvas_api/index.html | 174 |
1 files changed, 0 insertions, 174 deletions
diff --git a/files/tr/web/api/canvas_api/index.html b/files/tr/web/api/canvas_api/index.html deleted file mode 100644 index 32842f3676..0000000000 --- a/files/tr/web/api/canvas_api/index.html +++ /dev/null @@ -1,174 +0,0 @@ ---- -title: Tuval Arabirimi -slug: Web/API/Canvas_API -tags: - - Arabirim - - Canvas - - Genel Bakış - - JavaScript - - Kaynak - - Tuval -translation_of: Web/API/Canvas_API -original_slug: Web/API/Tuval_Arabirimi ---- -<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> |