unslug ca: move

1 files changed, 158 insertions, 0 deletions

diff --git a/files/ca/web/api/canvas_api/tutorial/basic_usage/index.html b/files/ca/web/api/canvas_api/tutorial/basic_usage/index.html
new file mode 100644
index 0000000000..fb15a62d81
--- /dev/null
+++ b/files/ca/web/api/canvas_api/tutorial/basic_usage/index.html
@@ -0,0 +1,158 @@
+---
+title: Ús bàsic de canvas
+slug: Web/API/Canvas_API/Tutorial/Ús_bàsic
+tags:
+  - Canvas
+  - Graphics
+  - HTML
+  - Intermediate
+  - Tutorial
+translation_of: Web/API/Canvas_API/Tutorial/Basic_usage
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}</div>
+
+<div class="summary">
+<p>Comencem aquest tutorial consultant l'element {{HTMLElement("canvas")}} {{Glossary("HTML")}}. Al final d'aquesta pàgina, sabreu com configurar un context 2D de canvas i haureu dibuixat un primer exemple en el vostre navegador.</p>
+</div>
+
+<h2 id="L'element_&lt;canvas>">L'element <code>&lt;canvas&gt;</code></h2>
+
+<pre class="brush: html">&lt;canvas id="tutorial" width="150" height="150"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>A primera vista, {{HTMLElement("canvas")}} s'assembla l'element {{HTMLElement("img")}} amb l'única diferència clara, que no té els atributs <code>src</code> i <code>alt</code>. De fet, l'element <code>&lt;canvas&gt;</code> només té dos atributs, {{htmlattrxref("width", "canvas")}} i {{htmlattrxref("height", "canvas")}}. Aquests són opcionals i també es poden establir utilitzant les <a href="/en-US/docs/Web/API/HTMLCanvasElement">properties</a> {{Glossary("DOM")}} . Quan no s'especifiquen els atributs <code>width</code> i <code>height</code>, inicialment canvas tindrà <strong>300 píxels</strong> d'amplada i <strong>150 píxels</strong> d'alçada. L'element es pot dimensionar arbitràriament per {{Glossary("CSS")}}, però durant la representació, la imatge s'escala per adaptar-se a la seva grandària de disseny: si el dimensionament CSS no respecta la relació inicial de canvas, apareixerà distorsionada</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Si les vostres representacions semblen distorsionades, intenteu especificar els atributs <code>width</code> i <code>height</code>, explícitament, en els atributs <code>&lt;canvas&gt;</code> i no utilitzeu CSS.</p>
+</div>
+
+<p>L'atribut <a href="/en-US/docs/Web/HTML/Global_attributes/id"><code>id</code></a> no és específic de l'element <code>&lt;canvas&gt;</code>, però és un dels <a href="/en-US/docs/Web/HTML/Global_attributes">atributs HTML global</a> que es pot aplicar a qualsevol element HTML (com <code><a href="/en-US/docs/Web/HTML/Global_attributes/class">class</a></code>, per exemple). Sempre és una bona idea proporcionar un <code>id</code>, perquè això fa que sigui molt més fàcil identificar-lo en un script.</p>
+
+<p>L'element <code>&lt;canvas&gt;</code> se li pot donar estil com qualsevol imatge normal ({{cssxref("margin")}}, {{cssxref("border")}}, {{cssxref("background")}}…). Aquestes regles, no obstant això, no afecten al dibuix real sobre el llenç. Veurem com això es fa en un <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">capítol dedicat</a> d'aquest tutorial. Quan no s'apliquen regles d'estil al llenç, inicialment, serà totalment transparent.</p>
+
+<div id="section_2">
+<h3 id="Contingut_alternatiu">Contingut alternatiu</h3>
+
+<p>L'element <code>&lt;canvas&gt;</code> difereix d'una etiqueta {{HTMLElement("img")}} com per els elements {{HTMLElement("video")}}, {{HTMLElement("audio")}} o {{HTMLElement("picture")}}, és fàcil definir algun contingut alternatiu, que es mostri en navegadors antics que no ho suportin, com ara en versions d'Internet Explorer anteriors a la versió 9 o navegadors textuals. Sempre haureu de proporcionar contingut alternatiu perquè els navegadors ho mostrin.</p>
+
+<p>Proporcionar contingut alternatiu és molt senzill: simplement inseriu el contingut alternatiu dins de l'element <code>&lt;canvas&gt;</code>. Els navegadors que no suporten <code>&lt;canvas&gt;</code> ignoraran el contenidor i mostraran el contingut alternatiu dins del mateix. Els navegadors que suporten <code>&lt;canvas&gt;</code> ignoraran el contingut dins del contenidor, i simplement mostraran el llenç, normalment.</p>
+
+<p>Per exemple, podríem proporcionar una descripció de text del contingut del llenç o proporcionar una imatge estàtica del contingut presentat dinàmicament. Això pot semblar-se a això:</p>
+
+<pre class="brush: html">&lt;canvas id="stockGraph" width="150" height="150"&gt;
+  current stock price: $3.15 + 0.15
+&lt;/canvas&gt;
+
+&lt;canvas id="clock" width="150" height="150"&gt;
+  &lt;img src="images/clock.png" width="150" height="150" alt=""/&gt;
+&lt;/canvas&gt;
+</pre>
+
+<p>Dir-li a l'usuari que utilitzi un navegador diferent que suporti canvas no ajuda als usuaris que no poden llegir canvas en absolut, per exemple. Proporcionar un text alternatiu útil o un DOM secundari, ajuda a <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">fer canvas més accessible</a>.</p>
+
+<h3 id="Etiqueta_&lt;canvas>_obligatoria">Etiqueta <code>&lt;/canvas&gt;</code> obligatoria</h3>
+
+<p>Com a conseqüència de la manera en què es proporciona una solució alternativa, a diferència de l'element {{HTMLElement("img")}}, l'element {{HTMLElement("canvas")}} <strong>requereix</strong> l'etiqueta de tancament (<code>&lt;/canvas&gt;</code>). Si aquesta etiqueta no està present, la resta del document es consideraria contingut alternatiu i no es mostraria.</p>
+
+<p>Si no es necessita un contingut alternatiu, un simple <code>&lt;canvas id="foo" ...&gt;&lt;/canvas&gt;</code> és totalment compatible amb tots els navegadors que suporten canvas.</p>
+
+<h2 id="El_context_de_representació">El context de representació</h2>
+
+<p>L'element {{HTMLElement("canvas")}} crea una superfície de dibuix de grandària fixa que exposa un o més <strong>contextos de representació</strong>, que s'utilitzen per crear i manipular el contingut mostrat. En aquest tutorial, ens centrem en el context de representació 2D. Altres contextos poden proporcionar diferents tipus de representació; per exemple, <a href="https://developer.mozilla.org/en-US/docs/Web/WebGL">WebGL</a> utilitza un context 3D basat en <a href="http://www.khronos.org/opengles/">OpenGL</a> ÉS.Other contexts may provide different types of rendering; for example, <a href="/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a> uses a 3D context based on <a class="external" href="http://www.khronos.org/opengles/" rel="external" title="http://en.wikipedia.org/wiki/OpenGL_ES">OpenGL ES</a>.</p>
+
+<p>El llenç està inicialment en blanc. Per mostrar alguna cosa, un script, primer necessita accedir al context de representació i dibuixar en ell. L'element {{HTMLElement("canvas")}} té un mètode anomenat {{domxref("HTMLCanvasElement.getContext", "getContext()")}}, utilitzat per obtenir el context de representació i les seves funcions de dibuix. <code>getContext()</code> pren un paràmetre, el tipus de context. Per als gràfics 2D, com els que es detallen en aquest tutorial, heu d'especificar <code>"2d"</code> per obtenir un {{domxref("CanvasRenderingContext2D")}}.</p>
+
+<pre class="brush: js">var canvas = document.getElementById('tutorial');
+var ctx = canvas.getContext('2d');
+</pre>
+
+<p>La primera línia del script recupera el node en el DOM, que representa l'element {{HTMLElement("canvas")}} cridant el mètode {{domxref("document.getElementById()")}}. Un cop tingueu el node d'element, podeu accedir al context del dibuix mitjançant el mètode <code>getContext()</code>.</p>
+
+<div id="section_5">
+<h2 id="Comprovació_del_suport">Comprovació del suport</h2>
+
+<p>El contingut alternatiu es mostra en navegadors que no admeten {{HTMLElement("canvas")}}. Les seqüències d'ordres, també poden comprovar la compatibilitat mitjançant programació, simplement provant la presència del mètode <code>getContext()</code>. El nostre fragment de codi de dalt es converteix en una cosa així:</p>
+
+<pre class="brush: js">var canvas = document.getElementById('tutorial');
+
+if (canvas.getContext) {
+  var ctx = canvas.getContext('2d');
+  // drawing code here
+} else {
+  // canvas-unsupported code here
+}
+</pre>
+</div>
+</div>
+
+<h2 id="Una_plantilla_esquelet">Una plantilla esquelet</h2>
+
+<p>Aquí teniu una plantilla minimalista, que usarem com a punt de partida per a exemples posteriors.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> no és una bona pràctica incrustar un script dins d'HTML. Ho fem aquí per mantenir l'exemple concís.</p>
+</div>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"/&gt;
+    &lt;title&gt;Canvas tutorial&lt;/title&gt;
+    &lt;script type="text/javascript"&gt;
+      function draw() {
+        var canvas = document.getElementById('tutorial');
+        if (canvas.getContext) {
+          var ctx = canvas.getContext('2d');
+        }
+      }
+    &lt;/script&gt;
+    &lt;style type="text/css"&gt;
+      canvas { border: 1px solid black; }
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body onload="draw();"&gt;
+    &lt;canvas id="tutorial" width="150" height="150"&gt;&lt;/canvas&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>El script inclou una funció anomenada <code>draw()</code>, que s'executa una vegada que la pàgina acaba de carregar-se; això es fa escoltant  l'esdeveniment {{event("load")}} en el document. Aquesta funció, o una similar, també pot ser cridada usant {{domxref("WindowTimers.setTimeout", "window.setTimeout()")}}, {{domxref("WindowTimers.setInterval", "window.setInterval()")}}, o qualsevol altre controlador d'esdeveniments, sempre que la pàgina s'hagi carregat primer.</p>
+
+<p>Així és com es veuria una plantilla en acció. Com es mostra aquí, inicialment està en blanc.</p>
+
+<p>{{EmbedLiveSample("A_skeleton_template", 160, 160)}}</p>
+
+<h2 id="Un_exemple_senzill">Un exemple senzill</h2>
+
+<p>Per començar, feu un cop d'ull a un exemple senzill que dibuixa dos rectangles que es creuen, un dels quals té una transparència alfa. Explorarem com funciona això amb més detall en exemples posteriors.</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+ &lt;head&gt;
+  &lt;meta charset="utf-8"/&gt;
+  &lt;script type="application/javascript"&gt;
+    function draw() {
+      var canvas = document.getElementById('canvas');
+      if (canvas.getContext) {
+        var ctx = canvas.getContext('2d');
+
+        ctx.fillStyle = 'rgb(200, 0, 0)';
+        ctx.fillRect(10, 10, 50, 50);
+
+        ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
+        ctx.fillRect(30, 30, 50, 50);
+      }
+    }
+  &lt;/script&gt;
+ &lt;/head&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>Aquest exemple es veu així:</p>
+
+<p>{{EmbedLiveSample("A_simple_example", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}</p>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}</p>