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, 187 insertions, 0 deletions
diff --git a/files/ca/web/api/canvas_api/index.html b/files/ca/web/api/canvas_api/index.html new file mode 100644 index 0000000000..cb61814e66 --- /dev/null +++ b/files/ca/web/api/canvas_api/index.html @@ -0,0 +1,187 @@ +--- +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> |