diff options
Diffstat (limited to 'files/ca/web/api/canvas_api/index.html')
| -rw-r--r-- | files/ca/web/api/canvas_api/index.html | 187 |
1 files changed, 0 insertions, 187 deletions
diff --git a/files/ca/web/api/canvas_api/index.html b/files/ca/web/api/canvas_api/index.html deleted file mode 100644 index cb61814e66..0000000000 --- a/files/ca/web/api/canvas_api/index.html +++ /dev/null @@ -1,187 +0,0 @@ ---- -title: Canvas API -slug: Web/API/Canvas_API -tags: - - API - - Canvas - - Overview - - Reference -translation_of: Web/API/Canvas_API ---- -<div>{{CanvasSidebar}}</div> - -<p class="summary">Afegit en <a href="/en-US/docs/HTML/HTML5">HTML5</a>, l'element HTML<strong> {{HTMLElement("canvas")}} </strong>pot ser usat per dibuixar gràfics a través de scripts en <a href="/en-US/docs/Web/JavaScript">JavaScript</a>. Per exemple, es pot utilitzar per dibuixar gràfics, fer composicions fotogràfiques, crear animacions o, fins i tot, processar o representar vídeos en temps real.</p> - -<p>Les aplicacions de Mozilla van obtenir compatibilitat amb <code><canvas></code> a partir de Gecko 1.8 (és a dir <a href="/en-US/docs/Mozilla/Firefox/Releases/1.5">Firefox 1.5</a>). L'element va ser introduït originalment per Apple per al tauler OS X i Safari. Internet Explorer suporta <code><canvas></code> a partir de la versió 9; per a versions anteriors de IE, una pàgina pot efectivament afegir suport per <code><canvas></code> en incloure un script del projecte Google's <a href="https://github.com/arv/explorercanvas">Explorer Canvas</a>. Google Chrome i Opera 9 també són compatibles amb <code><canvas></code>.</p> - -<p>L'element <code><canvas></code> <span id="result_box" lang="ca"><span>també és utilitzat per</span></span> <a href="/en-US/docs/Web/WebGL">WebGL</a> <span id="result_box" lang="ca"><span>per dibuixar gràfics 3D accelerats per maquinari en pàgines web.</span></span></p> - -<h2 id="Exemple">Exemple</h2> - -<p><span id="result_box" lang="ca"><span>Aquest és només un fragment de codi senzill que utilitza el mètode</span></span> {{domxref("CanvasRenderingContext2D.fillRect()")}}.</p> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> - -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js">var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); - -ctx.fillStyle = 'green'; -ctx.fillRect(10, 10, 100, 100); -</pre> - -<p><span id="result_box" lang="ca"><span>Editeu el codi següent i vegeu els canvis actualitzats en directe al llenç:</span></span></p> - -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> - -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> -<div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> -</div> -<textarea id="code" class="playable-code"> -ctx.fillStyle = 'green'; -ctx.fillRect(10, 10, 100, 100);</textarea> -</pre> - -<pre class="brush: js">var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext("2d"); -var textarea = document.getElementById('code'); -var reset = document.getElementById('reset'); -var edit = document.getElementById('edit'); -var code = textarea.value; - -function drawCanvas() { - ctx.clearRect(0, 0, canvas.width, canvas.height); - eval(textarea.value); -} - -reset.addEventListener('click', function() { - textarea.value = code; - drawCanvas(); -}); - -edit.addEventListener('click', function() { - textarea.focus(); -}) - -textarea.addEventListener('input', drawCanvas); -window.addEventListener('load', drawCanvas); -</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> - -<h2 id="Referència">Referència</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>Les interfícies relacionades amb <code>WebGLRenderingContext</code> estan referenciades en <a href="/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a>.</p> - -<p>{{domxref("CanvasCaptureMediaStream")}} està relacionat.</p> - -<h2 id="Guies_i_tutorials">Guies i tutorials</h2> - -<dl> - <dt><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Tutorial Canvas </a></dt> - <dd>Un tutorial complet que abasta tant l'ús bàsic de <code><canvas></code> com les seves funcions avançades.</dd> - <dt><a href="/en-US/Add-ons/Code_snippets/Canvas">Fragments de codi: Canvas</a></dt> - <dd>Alguns fragments de codi orientats a desenvolupadors d'extensions que involucren <code><canvas></code>.</dd> - <dt><a href="/en-US/docs/Web/API/Canvas_API/A_basic_ray-caster">Demostració: Un llançador de rajos bàsic</a></dt> - <dd>Una demostració d'animació de traçat de rajos usant canvas.</dd> - <dt><a href="/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas">Dibuixar objectes DOM en canvas</a></dt> - <dd>Com dibuixar contingut DOM, com ara elements HTML, dins de canvas.</dd> - <dt><a href="/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">Manipular vídeo utilitzant canvas</a></dt> - <dd>Combinar {{HTMLElement("video")}} i {{HTMLElement("canvas")}} per manipular dades de vídeo en temps real.</dd> -</dl> - -<h2 id="Recursos">Recursos</h2> - -<h3 id="Genèric">Genèric</h3> - -<ul> - <li><a href="http://joshondesign.com/p/books/canvasdeepdive/title.html">Aprofundint en canvas HTML5</a></li> - <li><a href="http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html">Manual de Canvas</a></li> -</ul> - -<h3 id="Biblioteques"><span id="result_box" lang="ca"><span title="Libraries - - ">Biblioteques</span></span></h3> - -<ul> - <li><a href="http://fabricjs.com">Fabric.js</a> <span id="result_box" lang="ca"><span title="Fabric.js is an open-source canvas library with SVG parsing capabilities. - ">és una biblioteca de canvas de codi obert amb funcions d'anàlisi de SVG.</span></span></li> - <li><a href="https://github.com/ericdrowell/KineticJS">Kinetic.js</a> <span id="result_box" lang="ca"><span title="Kinetic.js is an open-source canvas library focused on interactivity for desktop and mobile applications. - ">és una biblioteca de </span><span title="Fabric.js is an open-source canvas library with SVG parsing capabilities. - ">canvas</span></span><span lang="ca"><span title="Kinetic.js is an open-source canvas library focused on interactivity for desktop and mobile applications. - "> de codi obert centrada en la interactivitat per a aplicacions d'escriptori i mòbils.</span></span></li> - <li><a href="http://paperjs.org/">Paper.js</a> <span id="result_box" lang="ca"><span title="Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. - ">és un marc de seqüències d'ordres gràfiques de vectors, de codi obert que s'executa a la part superior de Canvas HTML5.</span></span></li> - <li><a href="http://origamijs.com/docs/">Origami.js</a> <span id="result_box" lang="ca"><span title="Origami.js is an open source lightweight canvas library. - ">és una biblioteca de </span><span title="Fabric.js is an open-source canvas library with SVG parsing capabilities. - ">canvas</span></span><span lang="ca"><span title="Origami.js is an open source lightweight canvas library. - "> lleugera de codi obert.</span></span></li> - <li><a href="http://libcanvas.github.com/">libCanvas</a> <span id="result_box" lang="ca"><span title="libCanvas is powerful and lightweight canvas framework. - ">és un marc de canvas potent i lleuger.</span></span></li> - <li><a href="http://processingjs.org">Processing.js</a> és un port del llenguatge de visualització de processament.</li> - <li><a href="https://playcanvas.com/">PlayCanvas</a> <span id="result_box" lang="ca"><span title="PlayCanvas is an open source game engine. - ">és un motor de joc de codi obert.</span></span></li> - <li><a href="http://www.pixijs.com/">Pixi.js</a> <span id="result_box" lang="ca"><span title="PlayCanvas is an open source game engine. - ">és un motor de joc de codi obert.</span></span></li> - <li><a href="http://www.liquidx.net/plotkit/">PlotKit</a> <span id="result_box" lang="ca"><span title="PlotKit is a charting and graphing library. - ">és una biblioteca </span></span> mapes gràfics <span lang="ca"><span title="PlotKit is a charting and graphing library. - "> i gràfics</span></span>.</li> - <li><a class="link-https" href="https://github.com/jeremyckahn/rekapi">Rekapi</a> és una API d'animació d'emmarcat de tecles per Canvas.</li> - <li><a href="http://senchalabs.github.com/philogl/">PhiloGL</a> <span id="result_box" lang="ca"><span title="PhiloGL is a WebGL framework for data visualization, creative coding and game development. - ">és un marc WebGL per a la visualització de dades, codificació creativa i el desenvolupament de jocs</span></span></li> - <li><a href="http://thejit.org/">JavaScript InfoVis Toolkit</a> crea visualitzacions interactives de dades 2D Canvas per la Web.</li> - <li><a href="http://www.createjs.com/easeljs">EaselJS</a> <span id="result_box" lang="ca"><span title="EaselJS is a free/open source library to make it easier to use canvas for games and art - ">és una biblioteca de codi obert/lliure per facilitar l'ús de canvas en jocs i art</span></span></li> - <li><a href="http://scrawl.rikweb.org.uk/">Scrawl-canvas</a> <span id="result_box" lang="ca"><span title="Scrawl-canvas is another open-source javascript library for creating and manipulating 2d canvas elements - ">és una altra biblioteca de codi obert Javascript per crear i manipular elements 2d</span></span> canvas.</li> - <li><a href="https://www.patrick-wied.at/static/heatmapjs/">heatmap.js</a> <span id="result_box" lang="ca"><span title="heatmap.js is an open source library to create canvas based heatmaps">és una biblioteca de codi obert per crear mapes de calor basats en</span></span> canvas.</li> -</ul> - -<h2 id="Especificacions">Especificacions</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificació</th> - <th scope="col">Estat</th> - <th scope="col">Comentari</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="Vegeu_també">Vegeu també</h2> - -<ul> - <li><a href="/en-US/docs/Web/WebGL">WebGL</a></li> -</ul> |