remove retired locales (#699)

1 files changed, 0 insertions, 336 deletions

diff --git a/files/ca/web/api/canvas_api/tutorial/basic_animations/index.html b/files/ca/web/api/canvas_api/tutorial/basic_animations/index.html
deleted file mode 100644
index 358c12a3d7..0000000000
--- a/files/ca/web/api/canvas_api/tutorial/basic_animations/index.html
+++ /dev/null
@@ -1,336 +0,0 @@
----
-title: Animacions bàsiques
-slug: Web/API/Canvas_API/Tutorial/Basic_animations
-tags:
-  - Canvas
-  - Graphics
-  - HTML
-  - HTML5
-  - Intermediate
-  - Tutorial
-translation_of: Web/API/Canvas_API/Tutorial/Basic_animations
-original_slug: Web/API/Canvas_API/Tutorial/Animacions_bàsiques
----
-<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Web/API/Canvas_API/Tutorial/Advanced_animations")}}</div>
-
-<div class="summary">
-<p>Atès que estem usant Javascript per controlar els elements {{HTMLElement("canvas")}}, també és molt fàcil fer animacions (interactives). En aquest capítol veurem com fer algunes animacions bàsiques.</p>
-</div>
-
-<p>Probablement, la major limitació és que, una vegada que es dibuixa una forma, aquesta es manté així. Si necessitem moure-la, hem de tornar a dibuixar-la i tot el que s'ha dibuixat abans. Es necessita molt temps per tornar a dibuixar quadres complexos i el rendiment depèn en gran manera de la velocitat de l'equip en el qual s'està executant.</p>
-
-<h2 id="Basic_animation_steps" name="Basic_animation_steps">Passos bàsics d'animació</h2>
-
-<p>Aquests són els passos que s'han de seguir per dibuixar un marc:</p>
-
-<ol>
- <li><strong>Esborrar el llenç</strong><br>
-  A menys que les formes que es dibuixin omplin el llenç complet (per exemple, una imatge de fons), és necessari esborrar qualsevol forma que s'hi hagi dibuixat prèviament. La manera més fàcil de fer-ho, és usant el mètode {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}.</li>
- <li><strong>Guardar l'estat del llenç</strong><br>
-  Si es canvia qualsevol configuració (com ara estils, transformacions, etc.) que afectin a l'estat del llenç i ens volem assegurar que l'estat original s'utilitza cada vegada que es dibuixa un marc, hem de guardar aquest estat original.</li>
- <li><strong>Dibuixar formes animades</strong><br>
-  El pas on es fa la representació del marc real.</li>
- <li><strong>Restaurar l'estat del llenç</strong><br>
-  Si s'ha guardat l'estat, ho hem de restaurar abans de dibuixar un nou marc.</li>
-</ol>
-
-<h2 id="Controlling_an_animation" name="Controlling_an_animation">Controlar una animació</h2>
-
-<p>Les formes es dibuixen al llenç usant els mètodes de canvas directament o cridant a les funcions personalitzades. En circumstàncies normals, només veiem que aquests resultats apareixen en el llenç quan el script acaba d'executar-se. Per exemple, no és possible fer una animació des d'un bucle <code>for</code>.</p>
-
-<p>Això significa que necessitem una forma d'executar les nostres funcions de dibuix durant un període de temps. Hi ha dues maneres de controlar una animació com aquesta.</p>
-
-<h3 id="Actualitzacions_programades">Actualitzacions programades</h3>
-
-<p>Primer estan les funcions {{domxref("window.setInterval()")}}, {{domxref("window.setTimeout()")}} i {{domxref("window.requestAnimationFrame()")}}, que es poden utilitzar per cridar a una funció específica durant un període de temps determinat.</p>
-
-<dl>
- <dt>{{domxref("WindowTimers.setInterval", "setInterval(function, delay)")}}</dt>
- <dd>Inicia repetidament l'execució de la funció especificada per la funció, cada mil·lisegons de retard.</dd>
- <dt>{{domxref("WindowTimers.setTimeout", "setTimeout(function, delay)")}}</dt>
- <dd>Executa la funció especificada per la <code>function</code> en mil·lisegons de <code>delay</code>.</dd>
- <dt>{{domxref("Window.requestAnimationFrame()", "requestAnimationFrame(callback)")}}</dt>
- <dd>Li diu al navegador que desitja realitzar una animació i sol·licita al navegador que cridi a una funció especifica per actualitzar una animació abans del proper repintat.</dd>
-</dl>
-
-<p>Si no es vol cap interacció amb l'usuari, es pot utilitzar la funció <code>setInterval()</code> que executa repetidament el codi proporcionat. Si volguéssim fer un joc, podríem usar esdeveniments de teclat o ratolí per controlar l'animació i usar <code>setTimeout()</code>. En establir {{domxref("EventListener")}}s, capturem qualsevol interacció de l'usuari i s'executan les nostres funcions d'animació</p>
-
-<div class="note">
-<p>En els exemples següents, utilitzarem el mètode {{domxref("window.requestAnimationFrame()")}} per controlar l'animació. El mètode <code>requestAnimationFrame</code> proporciona una manera fluïda i eficient per a l'animació, cridant al marc d'animació quan el sistema estigui preparat per pintar el marc. El nombre de crides retornades és generalment 60 vegades per segon i pot reduir-se a una taxa més baixa quan s'executa en les pestanyes de fons. Per a més informació sobre el bucle d'animació, especialment per a jocs, veure l'article <a href="/en-US/docs/Games/Anatomy">Anatomia d'un videojoc</a> en la nostra <a href="/en-US/docs/Games">Zona de desenvolupament de jocs</a>.</p>
-</div>
-
-<h2 id="Un_sistema_solar_animat"><span id="result_box" lang="ca"><span>Un sistema solar animat</span></span></h2>
-
-<p><span id="result_box" lang="ca"><span>Aquest exemple anima un petit model del nostre sistema solar.</span></span></p>
-
-<pre class="brush: js">var sun = new Image();
-var moon = new Image();
-var earth = new Image();
-function init() {
-  sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
-  moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
-  earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
-  window.requestAnimationFrame(draw);
-}
-
-function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  ctx.globalCompositeOperation = 'destination-over';
-  ctx.clearRect(0, 0, 300, 300); // clear canvas
-
-  ctx.fillStyle = 'rgba(0, 0, 0, 0.4)';
-  ctx.strokeStyle = 'rgba(0, 153, 255, 0.4)';
-  ctx.save();
-  ctx.translate(150, 150);
-
-  // Earth
-  var time = new Date();
-  ctx.rotate(((2 * Math.PI) / 60) * time.getSeconds() + ((2 * Math.PI) / 60000) * time.getMilliseconds());
-  ctx.translate(105, 0);
-  ctx.fillRect(0, -12, 50, 24); // Shadow
-  ctx.drawImage(earth, -12, -12);
-
-  // Moon
-  ctx.save();
-  ctx.rotate(((2 * Math.PI) / 6) * time.getSeconds() + ((2 * Math.PI) / 6000) * time.getMilliseconds());
-  ctx.translate(0, 28.5);
-  ctx.drawImage(moon, -3.5, -3.5);
-  ctx.restore();
-
-  ctx.restore();
-
-  ctx.beginPath();
-  ctx.arc(150, 150, 105, 0, Math.PI * 2, false); // Earth orbit
-  ctx.stroke();
-
-  ctx.drawImage(sun, 0, 0, 300, 300);
-
-  window.requestAnimationFrame(draw);
-}
-
-init();
-</pre>
-
-<div class="hidden">
-<pre class="brush: html">&lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;</pre>
-</div>
-
-<p>{{EmbedLiveSample("An_animated_solar_system", "310", "310", "https://mdn.mozillademos.org/files/202/Canvas_animation1.png")}}</p>
-
-<h2 id="Un_rellotge_animat"><span id="result_box" lang="ca"><span>Un rellotge animat</span></span></h2>
-
-<p><span id="result_box" lang="ca"><span>Aquest exemple dibuixa un rellotge animat que mostra l'hora actual.</span></span></p>
-
-<pre class="brush: js">function clock() {
-  var now = new Date();
-  var ctx = document.getElementById('canvas').getContext('2d');
-  ctx.save();
-  ctx.clearRect(0, 0, 150, 150);
-  ctx.translate(75, 75);
-  ctx.scale(0.4, 0.4);
-  ctx.rotate(-Math.PI / 2);
-  ctx.strokeStyle = 'black';
-  ctx.fillStyle = 'white';
-  ctx.lineWidth = 8;
-  ctx.lineCap = 'round';
-
-  // Hour marks
-  ctx.save();
-  for (var i = 0; i &lt; 12; i++) {
-    ctx.beginPath();
-    ctx.rotate(Math.PI / 6);
-    ctx.moveTo(100, 0);
-    ctx.lineTo(120, 0);
-    ctx.stroke();
-  }
-  ctx.restore();
-
-  // Minute marks
-  ctx.save();
-  ctx.lineWidth = 5;
-  for (i = 0; i &lt; 60; i++) {
-    if (i % 5!= 0) {
-      ctx.beginPath();
-      ctx.moveTo(117, 0);
-      ctx.lineTo(120, 0);
-      ctx.stroke();
-    }
-    ctx.rotate(Math.PI / 30);
-  }
-  ctx.restore();
-
-  var sec = now.getSeconds();
-  var min = now.getMinutes();
-  var hr  = now.getHours();
-  hr = hr &gt;= 12 ? hr - 12 : hr;
-
-  ctx.fillStyle = 'black';
-
-  // write Hours
-  ctx.save();
-  ctx.rotate(hr * (Math.PI / 6) + (Math.PI / 360) * min + (Math.PI / 21600) *sec);
-  ctx.lineWidth = 14;
-  ctx.beginPath();
-  ctx.moveTo(-20, 0);
-  ctx.lineTo(80, 0);
-  ctx.stroke();
-  ctx.restore();
-
-  // write Minutes
-  ctx.save();
-  ctx.rotate((Math.PI / 30) * min + (Math.PI / 1800) * sec);
-  ctx.lineWidth = 10;
-  ctx.beginPath();
-  ctx.moveTo(-28, 0);
-  ctx.lineTo(112, 0);
-  ctx.stroke();
-  ctx.restore();
-
-  // Write seconds
-  ctx.save();
-  ctx.rotate(sec * Math.PI / 30);
-  ctx.strokeStyle = '#D40000';
-  ctx.fillStyle = '#D40000';
-  ctx.lineWidth = 6;
-  ctx.beginPath();
-  ctx.moveTo(-30, 0);
-  ctx.lineTo(83, 0);
-  ctx.stroke();
-  ctx.beginPath();
-  ctx.arc(0, 0, 10, 0, Math.PI * 2, true);
-  ctx.fill();
-  ctx.beginPath();
-  ctx.arc(95, 0, 10, 0, Math.PI * 2, true);
-  ctx.stroke();
-  ctx.fillStyle = 'rgba(0, 0, 0, 0)';
-  ctx.arc(0, 0, 3, 0, Math.PI * 2, true);
-  ctx.fill();
-  ctx.restore();
-
-  ctx.beginPath();
-  ctx.lineWidth = 14;
-  ctx.strokeStyle = '#325FA2';
-  ctx.arc(0, 0, 142, 0, Math.PI * 2, true);
-  ctx.stroke();
-
-  ctx.restore();
-
-  window.requestAnimationFrame(clock);
-}
-
-window.requestAnimationFrame(clock);</pre>
-
-<div class="hidden">
-<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
-</div>
-
-<p>{{EmbedLiveSample("An_animated_clock", "180", "180", "https://mdn.mozillademos.org/files/203/Canvas_animation2.png")}}</p>
-
-<h2 id="Un_panorama_en_bucle">Un panorama en bucle</h2>
-
-<p>En aquest exemple, es desplaça una imatge panoràmica d'esquerra a dreta. Estem usant <a href="http://commons.wikimedia.org/wiki/File:Capitan_Meadows,_Yosemite_National_Park.jpg">una imatge del Parc Nacional Yosemite</a>, que hem pres de Wikipedia, però es pot usar qualsevol imatge que sigui més gran que el llenç.</p>
-
-<pre class="brush: js">var img = new Image();
-
-// User Variables - customize these to change the image being scrolled, its
-// direction, and the speed.
-
-img.src = 'https://mdn.mozillademos.org/files/4553/Capitan_Meadows,_Yosemite_National_Park.jpg';
-var CanvasXSize = 800;
-var CanvasYSize = 200;
-var speed = 30; // lower is faster
-var scale = 1.05;
-var y = -4.5; // vertical offset
-
-// Main program
-
-var dx = 0.75;
-var imgW;
-var imgH;
-var x = 0;
-var clearX;
-var clearY;
-var ctx;
-
-img.onload = function() {
-    imgW = img.width * scale;
-    imgH = img.height * scale;
-
-    if (imgW &gt; CanvasXSize) {
-        // image larger than canvas
-        x = CanvasXSize - imgW;
-    }
-    if (imgW &gt; CanvasXSize) {
-        // image width larger than canvas
-        clearX = imgW;
-    } else {
-        clearX = CanvasXSize;
-    }
-    if (imgH &gt; CanvasYSize) {
-        // image height larger than canvas
-        clearY = imgH;
-    } else {
-        clearY = CanvasYSize;
-    }
-
-    // get canvas context
-    ctx = document.getElementById('canvas').getContext('2d');
-
-    // set refresh rate
-    return setInterval(draw, speed);
-}
-
-function draw() {
-    ctx.clearRect(0, 0, clearX, clearY); // clear the canvas
-
-    // if image is &lt;= Canvas Size
-    if (imgW &lt;= CanvasXSize) {
-        // reset, start from beginning
-        if (x &gt; CanvasXSize) {
-            x = -imgW + x;
-        }
-        // draw additional image1
-        if (x &gt; 0) {
-            ctx.drawImage(img, -imgW + x, y, imgW, imgH);
-        }
-        // draw additional image2
-        if (x - imgW &gt; 0) {
-            ctx.drawImage(img, -imgW * 2 + x, y, imgW, imgH);
-        }
-    }
-
-    // image is &gt; Canvas Size
-    else {
-        // reset, start from beginning
-        if (x &gt; (CanvasXSize)) {
-            x = CanvasXSize - imgW;
-        }
-        // draw aditional image
-        if (x &gt; (CanvasXSize-imgW)) {
-            ctx.drawImage(img, x - imgW + 1, y, imgW, imgH);
-        }
-    }
-    // draw image
-    ctx.drawImage(img, x, y,imgW, imgH);
-    // amount to move
-    x += dx;
-}
-</pre>
-
-<p>A continuació un {{HTMLElement("canvas")}} en què es desplaça la imatge. Hem de tenir en compte que l'amplada i l'alçada especificades aquí, han de coincidir amb els valors de les variables <code>CanvasXZSize</code> i <code>CanvasYSize</code> en el codi JavaScript.</p>
-
-<pre class="brush: html">&lt;canvas id="canvas" width="800" height="200"&gt;&lt;/canvas&gt;</pre>
-
-<p>{{EmbedLiveSample("A_looping_panorama", "830", "230")}}</p>
-
-<h2 id="Other_examples" name="Other_examples">Altres exemples</h2>
-
-<dl>
- <dt><a href="/en-US/docs/Web/API/Canvas_API/A_basic_ray-caster" title="/en-US/docs/Web/Guide/HTML/A_basic_ray-caster">Una roda de raigs bàsica</a></dt>
- <dd>Un bon exemple de com fer animacions usant els controls del teclat.</dd>
- <dt><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Advanced_animations">Animacions avançades</a></dt>
- <dd>En el proper capítol veurem algunes tècniques avançades d'animació i física.</dd>
-</dl>
-
-<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Web/API/Canvas_API/Tutorial/Advanced_animations")}}</p>