diff options
Diffstat (limited to 'files/ca/web/api/canvas_api/tutorial')
11 files changed, 3462 insertions, 0 deletions
diff --git a/files/ca/web/api/canvas_api/tutorial/animacions_avançades/index.html b/files/ca/web/api/canvas_api/tutorial/animacions_avançades/index.html new file mode 100644 index 0000000000..4aebb46529 --- /dev/null +++ b/files/ca/web/api/canvas_api/tutorial/animacions_avançades/index.html @@ -0,0 +1,380 @@ +--- +title: Animacions avançades +slug: Web/API/Canvas_API/Tutorial/Animacions_avançades +tags: + - Canvas + - Graphics + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Advanced_animations +--- +<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}</div> + +<div class="summary"> +<p>En l'últim capítol vam fer algunes <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">animacions bàsiques</a> i vam conèixer maneres de fer moure les coses. En aquesta part veurem més d'a prop el moviment en si i afegirem una mica de física per fer que les nostres animacions siguin més avançades.</p> +</div> + +<h2 id="Dibuixar_una_bola">Dibuixar una bola</h2> + +<p>Usarem una bola per als nostres estudis d'animació, així que primer dibuixarem aquesta bola sobre el llenç. El següent codi ens configurarà.</p> + +<pre class="brush: html"><canvas id="canvas" width="600" height="300"></canvas> +</pre> + +<p>Com és habitual, primer necessitem un context de dibuix. Per dibuixar la bola, hem crear un objecte <code>ball</code> que contingui propietats i un mètode <code>draw()</code> per pintar-la sobre el llenç.</p> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +var ball = { + x: 100, + y: 100, + radius: 25, + color: 'blue', + draw: function() { + ctx.beginPath(); + ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true); + ctx.closePath(); + ctx.fillStyle = this.color; + ctx.fill(); + } +}; + +ball.draw();</pre> + +<p>Aquí no hi ha res especial, la bola és en realitat un cercle senzill i es dibuixa amb l'ajuda del mètode {{domxref("CanvasRenderingContext2D.arc()", "arc()")}}.</p> + +<h2 id="Afegir_velocitat">Afegir velocitat</h2> + +<p>Ara que tenim la bola, estem preparats per afegir una animació bàsica tal com hem après en l'<a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">últim capítol</a> d'aquest tutorial. Novament, {{domxref("window.requestAnimationFrame()")}} ens ajuda a controlar l'animació. La bola es mou en afegir un vector de velocitat a la posició. Per a cada fotograma, també {{domxref("CanvasRenderingContext2D.clearRect", "clear", "", 1)}} el llenç per eliminar cercles antics de fotogrames anteriors.</p> + +<pre class="brush: js; highlight:[8,9,24,25]">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +var raf; + +var ball = { + x: 100, + y: 100, + vx: 5, + vy: 2, + radius: 25, + color: 'blue', + draw: function() { + ctx.beginPath(); + ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true); + ctx.closePath(); + ctx.fillStyle = this.color; + ctx.fill(); + } +}; + +function draw() { + ctx.clearRect(0,0, canvas.width, canvas.height); + ball.draw(); + ball.x += ball.vx; + ball.y += ball.vy; + raf = window.requestAnimationFrame(draw); +} + +canvas.addEventListener('mouseover', function(e) { + raf = window.requestAnimationFrame(draw); +}); + +canvas.addEventListener('mouseout', function(e) { + window.cancelAnimationFrame(raf); +}); + +ball.draw(); +</pre> + +<h2 id="Límits">Límits</h2> + +<p>Sense cap prova de col·lisió de límits, la nostra bola surt ràpidament del llenç. Hem de comprovar si la posició <code>x</code> i <code>y</code> de la bola està fora de les dimensions del llenç i invertir la direcció dels vectors de velocitat. Per fer-ho, afegim les següents comprovacions al mètode <code>draw</code>:</p> + +<pre class="brush: js">if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) { + ball.vy = -ball.vy; +} +if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) { + ball.vx = -ball.vx; +}</pre> + +<h3 id="Primera_demostració">Primera demostració</h3> + +<p>Vegem com es veu en acció fins ara. Movem el ratolí en el llenç per iniciar l'animació.</p> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas></pre> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +var raf; + +var ball = { + x: 100, + y: 100, + vx: 5, + vy: 2, + radius: 25, + color: 'blue', + draw: function() { + ctx.beginPath(); + ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true); + ctx.closePath(); + ctx.fillStyle = this.color; + ctx.fill(); + } +}; + +function draw() { + ctx.clearRect(0,0, canvas.width, canvas.height); + ball.draw(); + ball.x += ball.vx; + ball.y += ball.vy; + + if (ball.y + ball.vy > canvas.height || + ball.y + ball.vy < 0) { + ball.vy = -ball.vy; + } + if (ball.x + ball.vx > canvas.width || + ball.x + ball.vx < 0) { + ball.vx = -ball.vx; + } + + raf = window.requestAnimationFrame(draw); +} + +canvas.addEventListener('mouseover', function(e) { + raf = window.requestAnimationFrame(draw); +}); + +canvas.addEventListener('mouseout', function(e) { + window.cancelAnimationFrame(raf); +}); + +ball.draw();</pre> +</div> + +<p>{{EmbedLiveSample("First_demo", "610", "310")}}</p> + +<h2 id="Acceleració"><span id="result_box" lang="ca"><span>Acceleració</span></span></h2> + +<p>Per fer el moviment més real, es pots jugar amb la velocitat d'aquesta manera, per exemple:</p> + +<pre class="brush: js">ball.vy *= .99; +ball.vy += .25;</pre> + +<p>Això retarda la velocitat vertical de cada fotograma, de manera que la bola només rebotarà en el sòl al final.</p> + +<div class="hidden"> +<h6 id="Second_demo">Second demo</h6> + +<pre class="brush: html"><canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas></pre> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +var raf; + +var ball = { + x: 100, + y: 100, + vx: 5, + vy: 2, + radius: 25, + color: 'blue', + draw: function() { + ctx.beginPath(); + ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true); + ctx.closePath(); + ctx.fillStyle = this.color; + ctx.fill(); + } +}; + +function draw() { + ctx.clearRect(0,0, canvas.width, canvas.height); + ball.draw(); + ball.x += ball.vx; + ball.y += ball.vy; + ball.vy *= .99; + ball.vy += .25; + + if (ball.y + ball.vy > canvas.height || + ball.y + ball.vy < 0) { + ball.vy = -ball.vy; + } + if (ball.x + ball.vx > canvas.width || + ball.x + ball.vx < 0) { + ball.vx = -ball.vx; + } + + raf = window.requestAnimationFrame(draw); +} + +canvas.addEventListener('mouseover', function(e) { + raf = window.requestAnimationFrame(draw); +}); + +canvas.addEventListener('mouseout', function(e) { + window.cancelAnimationFrame(raf); +}); + +ball.draw();</pre> +</div> + +<p>{{EmbedLiveSample("Second_demo", "610", "310")}}</p> + +<h2 id="Efecte_cua">Efecte cua</h2> + +<p>Fins ara, hem utilitzat el mètode {{domxref("CanvasRenderingContext2D.clearRect", "clearRect")}} per esborrar fotogrames anteriors. Si reemplacem aquest mètode per un semi-transparent {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}}, es pot crear fàcilment un efecte cua.</p> + +<pre class="brush: js">ctx.fillStyle = 'rgba(255, 255, 255, 0.3)'; +ctx.fillRect(0, 0, canvas.width, canvas.height);</pre> + +<div class="hidden"> +<h6 id="Third_demo">Third demo</h6> + +<pre class="brush: html"><canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas></pre> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +var raf; + +var ball = { + x: 100, + y: 100, + vx: 5, + vy: 2, + radius: 25, + color: 'blue', + draw: function() { + ctx.beginPath(); + ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true); + ctx.closePath(); + ctx.fillStyle = this.color; + ctx.fill(); + } +}; + +function draw() { + ctx.fillStyle = 'rgba(255, 255, 255, 0.3)'; + ctx.fillRect(0, 0, canvas.width, canvas.height); + ball.draw(); + ball.x += ball.vx; + ball.y += ball.vy; + ball.vy *= .99; + ball.vy += .25; + + if (ball.y + ball.vy > canvas.height || + ball.y + ball.vy < 0) { + ball.vy = -ball.vy; + } + if (ball.x + ball.vx > canvas.width || + ball.x + ball.vx < 0) { + ball.vx = -ball.vx; + } + + raf = window.requestAnimationFrame(draw); +} + +canvas.addEventListener('mouseover', function(e) { + raf = window.requestAnimationFrame(draw); +}); + +canvas.addEventListener('mouseout', function(e) { + window.cancelAnimationFrame(raf); +}); + +ball.draw();</pre> +</div> + +<p>{{EmbedLiveSample("Third_demo", "610", "310")}}</p> + +<h2 id="Afegir_control_al_ratolí">Afegir control al ratolí</h2> + +<p>Per tenir una mica de control sobre la bola, podem fer que segueixi al ratolí usant l'esdeveniment <code><a href="/en-US/docs/Web/Reference/Events/mousemove">mousemove</a></code>, per exemple. L'esdeveniment <code><a href="/en-US/docs/Web/Events/click">click</a></code> allibera la bola i la deixa rebotar de nou.</p> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas></pre> +</div> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +var raf; +var running = false; + +var ball = { + x: 100, + y: 100, + vx: 5, + vy: 1, + radius: 25, + color: 'blue', + draw: function() { + ctx.beginPath(); + ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true); + ctx.closePath(); + ctx.fillStyle = this.color; + ctx.fill(); + } +}; + +function clear() { + ctx.fillStyle = 'rgba(255, 255, 255, 0.3)'; + ctx.fillRect(0,0,canvas.width,canvas.height); +} + +function draw() { + clear(); + ball.draw(); + ball.x += ball.vx; + ball.y += ball.vy; + + if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) { + ball.vy = -ball.vy; + } + if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) { + ball.vx = -ball.vx; + } + + raf = window.requestAnimationFrame(draw); +} + +canvas.addEventListener('mousemove', function(e) { + if (!running) { + clear(); + ball.x = e.clientX; + ball.y = e.clientY; + ball.draw(); + } +}); + +canvas.addEventListener('click', function(e) { + if (!running) { + raf = window.requestAnimationFrame(draw); + running = true; + } +}); + +canvas.addEventListener('mouseout', function(e) { + window.cancelAnimationFrame(raf); + running = false; +}); + +ball.draw(); +</pre> + +<p><span id="result_box" lang="ca"><span>Moure la bola amb el ratolí i allibera-la amb un clic.</span></span></p> + +<p>{{EmbedLiveSample("Adding_mouse_control", "610", "310")}}</p> + +<h2 id="Escapada">Escapada</h2> + +<p>Aquest breu capítol només explica algunes tècniques per crear animacions més avançades. Hi ha molts més! Què tal afegir una paleta, alguns maons, i convertir aquesta demostració en un joc <a href="http://en.wikipedia.org/wiki/Breakout_%28video_game%29">Escapada</a>? Consulta la nostra àrea de <a href="https://developer.mozilla.org/en-US/docs/Games">desenvolupament de jocs</a> per veure més articles relacionats amb els jocs.</p> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li>{{domxref("window.requestAnimationFrame()")}}</li> + <li><a href="/en-US/docs/Games/Techniques/Efficient_animation_for_web_games">Animació eficient per a jocs web</a></li> +</ul> + +<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}</p> diff --git a/files/ca/web/api/canvas_api/tutorial/animacions_bàsiques/index.html b/files/ca/web/api/canvas_api/tutorial/animacions_bàsiques/index.html new file mode 100644 index 0000000000..e4a3751d1e --- /dev/null +++ b/files/ca/web/api/canvas_api/tutorial/animacions_bàsiques/index.html @@ -0,0 +1,335 @@ +--- +title: Animacions bàsiques +slug: Web/API/Canvas_API/Tutorial/Animacions_bàsiques +tags: + - Canvas + - Graphics + - HTML + - HTML5 + - Intermediate + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Basic_animations +--- +<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"><canvas id="canvas" width="300" height="300"></canvas></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 < 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 < 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 >= 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"><canvas id="canvas" width="150" height="150"></canvas></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 > CanvasXSize) { + // image larger than canvas + x = CanvasXSize - imgW; + } + if (imgW > CanvasXSize) { + // image width larger than canvas + clearX = imgW; + } else { + clearX = CanvasXSize; + } + if (imgH > 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 <= Canvas Size + if (imgW <= CanvasXSize) { + // reset, start from beginning + if (x > CanvasXSize) { + x = -imgW + x; + } + // draw additional image1 + if (x > 0) { + ctx.drawImage(img, -imgW + x, y, imgW, imgH); + } + // draw additional image2 + if (x - imgW > 0) { + ctx.drawImage(img, -imgW * 2 + x, y, imgW, imgH); + } + } + + // image is > Canvas Size + else { + // reset, start from beginning + if (x > (CanvasXSize)) { + x = CanvasXSize - imgW; + } + // draw aditional image + if (x > (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"><canvas id="canvas" width="800" height="200"></canvas></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> diff --git a/files/ca/web/api/canvas_api/tutorial/aplicar_estils_i_colors/index.html b/files/ca/web/api/canvas_api/tutorial/aplicar_estils_i_colors/index.html new file mode 100644 index 0000000000..9adcc2d5f4 --- /dev/null +++ b/files/ca/web/api/canvas_api/tutorial/aplicar_estils_i_colors/index.html @@ -0,0 +1,733 @@ +--- +title: Aplicar estils i colors +slug: Web/API/Canvas_API/Tutorial/Aplicar_estils_i_colors +tags: + - Canvas + - Graphics + - HTML + - HTML5 + - Intermediate + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors +--- +<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}</div> + +<div class="summary"> +<p>En el capítol sobre <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes">dibuixar formes</a>, hem utilitzat només els estils de línia i de farciment predeterminats. Aquí explorarem les opcions de canvas que tenim a la nostra disposició per fer els nostres dibuixos una mica més atractius. Aprendreu com afegir diferents colors, estils de línies, gradients, patrons i ombres als vostres dibuixos.</p> +</div> + +<h2 id="Colors" name="Colors">Colors</h2> + +<p>Fins ara només hem vist mètodes del context de dibuix. Si volem aplicar colors a una forma, hi ha dues propietats importants que podem utilitzar: <code>fillStyle</code> i <code>strokeStyle</code>.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle = color")}}</dt> + <dd>Estableix l'estil utilitzat per emplenar formes.</dd> + <dt>{{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle = color")}}</dt> + <dd>Estableix l'estil per als contorns de les formes.</dd> +</dl> + +<p><code>color</code> és una cadena que representa un {{cssxref("<color>")}} CSS, un objecte degradat o un objecte patró. Veurem els objectes de degradat i patró més endavant. Per defecte, el traç i el color del farciment estan establerts en negre (valor de color CSS <code>#000000</code>).</p> + +<div class="note"> +<p><strong>Nota:</strong> Quan es defineix la propietat <code>strokeStyle</code> i/o <code>fillStyle</code>, el nou valor es converteix en el valor predeterminat per a totes les formes que s'estan dibuixant a partir d'aquest moment. Per a cada forma que desitgeu en un color diferent, haureu de tornar a assignar la propietat <code>fillStyle</code> o <code>strokeStyle</code>.</p> +</div> + +<p>Les cadenes vàlides que podeu introduir han de ser, segons l'especificació, valors de {{cssxref("<color>")}} CSS. Cadascun dels següents exemples descriu el mateix color.</p> + +<pre class="brush: js">// these all set the fillStyle to 'orange' + +ctx.fillStyle = 'orange'; +ctx.fillStyle = '#FFA500'; +ctx.fillStyle = 'rgb(255, 165, 0)'; +ctx.fillStyle = 'rgba(255, 165, 0, 1)'; +</pre> + +<h3 id="A_fillStyle_example" name="A_fillStyle_example">Un exemple de <code>fillStyle</code></h3> + +<p>En aquest exemple, una vegada més, usem dos bucles <code>for</code> per dibuixar una graella de rectangles, cadascun en un color diferent. La imatge resultant hauria de ser similar a la captura de pantalla. Aquí no succeeix res espectacular. Utilitzem les dues variables <code>i</code> i <code>j</code> per generar un color RGB únic per a cada quadrat, i només modifiquen els valors vermell i verd. El canal blau té un valor fix. Modificant els canals, es poden generar tot tipus de paletes. En augmentar els passos, es pot aconseguir alguna cosa que se sembli a les paletes de color que utilitza Photoshop.</p> + +<pre class="brush: js;highlight[5,6]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + for (var i = 0; i < 6; i++) { + for (var j = 0; j < 6; j++) { + ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ', ' + + Math.floor(255 - 42.5 * j) + ', 0)'; + ctx.fillRect(j * 25, i * 25, 25, 25); + } + } +}</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>The result looks like this:</p> + +<p>{{EmbedLiveSample("A_fillStyle_example", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}</p> + +<h3 id="A_strokeStyle_example" name="A_strokeStyle_example">Un exemple de <code>strokeStyle</code></h3> + +<p>Aquest exemple és similar a l'anterior, però usa la propietat <code>strokeStyle</code> per canviar els colors dels contorns de les formes. Usem el mètode <code>arc()</code> per dibuixar cercles en lloc de quadrats.</p> + +<pre class="brush: js;highlight[5,6]"> function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + for (var i = 0; i < 6; i++) { + for (var j = 0; j < 6; j++) { + ctx.strokeStyle = 'rgb(0, ' + Math.floor(255 - 42.5 * i) + ', ' + + Math.floor(255 - 42.5 * j) + ')'; + ctx.beginPath(); + ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true); + ctx.stroke(); + } + } + } +</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p><span class="short_text" id="result_box" lang="ca"><span>El resultat és així:</span></span></p> + +<p>{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}</p> + +<h2 id="Transparency" name="Transparency">Transparència</h2> + +<p>A més de dibuixar formes opaques al llenç, també podem dibuixar formes semitransparents (o translúcides). Això es fa, ja sigui configurant la propietat <code>globalAlpha</code> o assignant un color semitransparent a l'estil de traç i/o d'ompliment.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha = transparencyValue")}}</dt> + <dd>Aplica el valor de transparència especificat a totes les formes futures dibuixades en el llenç. El valor ha d'estar entre 0,0 (totalment transparent) a 1.0 (totalment opac). Aquest valor és 1.0 (totalment opac) per defecte.</dd> +</dl> + +<p>La propietat <code>globalAlpha</code> pot ser útil si voleu dibuixar moltes formes al llenç amb una transparència similar, però en general, és més útil establir la transparència en formes individuals quan establiu els seus colors.</p> + +<p>Atès que les propietats <code>strokeStyle</code> and <code>fillStyle</code> accepten valors de color CSS rgba, podem utilitzar la notació següent per assignar un color transparent a ells.</p> + +<pre class="brush: js">// Assignar colors transparents a l'estil de traç i ompliment + +ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)'; +ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'; +</pre> + +<p>La funció <code>rgba()</code> és similar a la funció <code>rgb()</code> però té un paràmetre addicional. L'últim paràmetre estableix el valor de transparència d'aquest color en particular. El rang vàlid se situa de nou entre 0.0 (totalment transparent) i 1.0 (completament opac).</p> + +<h3 id="A_globalAlpha_example" name="A_globalAlpha_example">Un exemple de <code>globalAlpha</code></h3> + +<p>En aquest exemple, dibuixarem un fons de quatre quadrats de colors diferents. A més d'això, dibuixarem un conjunt de cercles semitransparents. La propietat <code>globalAlpha</code> s'estableix en 0.2 que s'utilitzarà per a totes les formes des d'aquest punt. Cada pas en el bucle <code>for</code> dibuixa un conjunt de cercles amb un radi creixent. El resultat final és un gradient radial. En superposar cada vegada més cercles un damunt de l'altre, reduïm efectivament la transparència dels cercles que ja s'han dibuixat. En augmentar el recompte de passos i, en efecte, dibuixar més cercles, el fons desapareixeria completament del centre de la imatge.</p> + +<pre class="brush: js;highlight[15]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + // draw background + ctx.fillStyle = '#FD0'; + ctx.fillRect(0, 0, 75, 75); + ctx.fillStyle = '#6C0'; + ctx.fillRect(75, 0, 75, 75); + ctx.fillStyle = '#09F'; + ctx.fillRect(0, 75, 75, 75); + ctx.fillStyle = '#F30'; + ctx.fillRect(75, 75, 75, 75); + ctx.fillStyle = '#FFF'; + + // set transparency value + ctx.globalAlpha = 0.2; + + // Draw semi transparent circles + for (i = 0; i < 7; i++) { + ctx.beginPath(); + ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true); + ctx.fill(); + } +}</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}</p> + +<h3 id="An_example_using_rgba()" name="An_example_using_rgba()">Un exemple usant <code>rgba()</code></h3> + +<p>En aquest segon exemple, fem alguna cosa semblant a l'anterior, però en comptes de dibuixar cercles un damunt de l'altre, dibuixem petits rectangles amb opacitat creixent. L'ús de <code>rgba()</code> dóna una mica més de control i flexibilitat, perquè podem definir l'estil d'emplenament i traç individualment.</p> + +<pre class="brush: js;highlight[16]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + // Draw background + ctx.fillStyle = 'rgb(255, 221, 0)'; + ctx.fillRect(0, 0, 150, 37.5); + ctx.fillStyle = 'rgb(102, 204, 0)'; + ctx.fillRect(0, 37.5, 150, 37.5); + ctx.fillStyle = 'rgb(0, 153, 255)'; + ctx.fillRect(0, 75, 150, 37.5); + ctx.fillStyle = 'rgb(255, 51, 0)'; + ctx.fillRect(0, 112.5, 150, 37.5); + + // Draw semi transparent rectangles + for (var i = 0; i < 10; i++) { + ctx.fillStyle = 'rgba(255, 255, 255, ' + (i + 1) / 10 + ')'; + for (var j = 0; j < 4; j++) { + ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5); + } + } +}</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>{{EmbedLiveSample("An_example_using_rgba()", "180", "180", "https://mdn.mozillademos.org/files/246/Canvas_rgba.png")}}</p> + +<h2 id="Line_styles" name="Line_styles">Estils de línia</h2> + +<p>Hi ha diverses propietats que ens permeten donar estil a les línies.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth = value")}}</dt> + <dd>Estableix l'amplària de les línies dibuixades en el futur.</dd> + <dt>{{domxref("CanvasRenderingContext2D.lineCap", "lineCap = type")}}</dt> + <dd>Estableix l'aparença dels extrems de les línies.</dd> + <dt>{{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin = type")}}</dt> + <dd>Estableix l'aparença de les "cantonades" on s'uneixen les línies.</dd> + <dt>{{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit = value")}}</dt> + <dd>Estableix un límit en la mitra, quan dues línies s'uneixen en un angle agut, per permetre-li controlar el grossor de la unió.</dd> + <dt>{{domxref("CanvasRenderingContext2D.getLineDash", "getLineDash()")}}</dt> + <dd>Retorna la matriu de patró de guió de la línia actual que conté un nombre parell de nombres no negatius.</dd> + <dt>{{domxref("CanvasRenderingContext2D.setLineDash", "setLineDash(segments)")}}</dt> + <dd>Estableix el patró de guió de línia actual.</dd> + <dt>{{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset = value")}}</dt> + <dd>Especifica on iniciar una matriu de guions en una línia.</dd> +</dl> + +<p>Obtindreu una millor comprensió del que fan, en mirar els exemples a continuació.</p> + +<h3 id="A_lineWidth_example" name="A_lineWidth_example">Un exemple de <code>lineWidth</code></h3> + +<p>Aquesta propietat estableix el gruix de la línia actual. Els valors han de ser nombres positius. Per defecte, aquest valor es fixa en 1.0 unitats.</p> + +<p>L'amplada de la línia és el gruix del traç centrat en la trajectòria indicada. En altres paraules, l'àrea que es dibuixa s'estén a la meitat de l'amplària de línia a cada costat de la trajectòria. Com que les coordenades del llenç no fan referència directa als píxels, s'ha de tenir especial cura per obtenir línies horitzontals i verticals nítides.</p> + +<p>En el següent exemple, es dibuixen 10 línies rectes amb amplades de línia creixents. La línia en l'extrem esquerre té 1.0 unitats d'ample. No obstant això, les línies de grossor més a l'esquerra i totes les altres d'ample imparell no apareixen nítides a causa del posicionament de la trajectòria.</p> + +<pre class="brush: js;highlight[4]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + for (var i = 0; i < 10; i++) { + ctx.lineWidth = 1 + i; + ctx.beginPath(); + ctx.moveTo(5 + i * 14, 5); + ctx.lineTo(5 + i * 14, 140); + ctx.stroke(); + } +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>{{EmbedLiveSample("A_lineWidth_example", "180", "180", "https://mdn.mozillademos.org/files/239/Canvas_linewidth.png")}}</p> + +<p>L'obtenció de línies nítides requereix entendre com es tracen les trajectòries. En les imatges següents, la graella representa la graella de coordenades del llenç. Els quadrats entre les línies de la graella són píxels reals en pantalla. En la primera imatge de graella que apareix a continuació, s'emplena un rectangle de (2,1) a (5,5). Tota l'àrea entre ells (vermell clar) cau en els límits de píxels, per la qual cosa el rectangle emplenat resultant tindrà vores nítides.</p> + +<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/201/Canvas-grid.png"></p> + +<p>Si es considera una trajectòria de (3,1) a (3,5) amb un gruix de línia <code>1.0</code>, s'acaba amb la situació en la segona imatge. L'àrea real a emplenar (blau fosc) només s'estén fins a la meitat dels píxels a cada costat de la trajectòria. S'ha de representar una aproximació d'això, la qual cosa significa que aquests píxels estan ombrejats parcialment, i dóna com a resultat que tota l'àrea (blau clar i blau fosc) s'ompli amb un color la meitat de fosc que el color de traç real. Això és el que succeeix amb la línia d'ample <code>1.0</code> en el codi d'exemple anterior<span style="display: none;"> </span>.</p> + +<p>Per arreglar això, s'ha de ser molt precís en la creació de la trajectòria. Sabent que una línia a <code>1.0</code> d'ample s'estendrà mitja unitat a cada costat de la trajectòria, creant la trajectòria de (3.5,1) a (3.5,5) resulta que la situació, en la tercera imatge, la línia d'ample <code>1.0</code> acaba completa i omplint, precisament, una sola línia vertical de píxels.</p> + +<div class="note"> +<p><strong>Nota:</strong> Hem de tenir en compte que en el nostre exemple de línia vertical, la posició Y encara fa referència a una posició sencera de la graella; si no fos així, veuríem píxels amb una cobertura parcial en els punts finals (però també, hem de tenir en compte que aquest comportament depèn de l'estil actual de <code>lineCap</code>, el valor predeterminat del qual és <code>butt</code>; és possible que desitgem calcular traços uniformes amb coordenades de mig píxel per a línies d'ample imparell, establint l'estil <code>lineCap</code> a estil <code>square</code>, de manera que el límit exterior del traç al voltant del punt final s'ampliï automàticament per cobrir tot el píxel exactament).</p> + +<p>Tinguem en compte, també, que només es veuran afectats els extrems d'inici i fi d'una trajectòria: si es tanca una trajectòria amb <code>closePath()</code>, no hi ha un punt d'inici i final; en el seu lloc, tots els extrems de la trajectòria es connecten al segment anterior i següent utilitzant, la configuració actual de l'estil <code>lineJoin</code>, el valor predeterminat del qual és <code>miter</code>, amb l'efecte d'estendre automàticament els límits exteriors dels segments connectats al seu punt d'intersecció, de manera que el traç representat cobreixi exactament els píxels complets centrats en cada punt final, si aquests segments connectats són horitzontals i/o verticals). Vegeu les dues seccions següents per a les demostracions d'aquests estils de línia addicionals..</p> +</div> + +<p>Per a les línies d'ample parell, cada meitat acaba sent una quantitat sencera de píxels, per la qual cosa es desitjable una trajectòria que estigui entre els píxels (és a dir, (3,1) a (3,5)), en lloc de baixar per la mitad dels píxels</p> + +<p>Tot i que és lleugerament dolorós quan inicialment es treballa amb gràfics 2D escalables, si ens fixem en la graella de píxels i la posició de les trajectòries, ens hem d'assegurar que els dibuixos es vegin correctes, independentment de l'escalat o qualsevol altra transformació. Una línia vertical de 1.0 d'ample dibuixada en la posició correcta, es convertirà en una línia nítida de 2 píxels quan s'ampliï per 2, i apareixerà en la posició correcta.</p> + +<h3 id="A_lineCap_example" name="A_lineCap_example">Un exemple de <code>lineCap</code></h3> + +<p>La propietat <code>lineCap</code> determina com es dibuixen els punts finals de cada línia. Hi ha tres valors possibles per a aquesta propietat i aquests són: <code>butt</code>, <code>round</code> i <code>square</code>. Per defecte, aquesta propietat està configurada com a <code>butt</code>.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/236/Canvas_linecap.png" style="float: right; height: 190px; width: 190px;"></p> + +<dl> + <dt><code>butt</code></dt> + <dd>Els extrems de les línies es quadren en els punts finals.</dd> + <dt><code>round</code></dt> + <dd>Els extrems de les línies són arrodonits.</dd> + <dt><code>square</code></dt> + <dd>Els extrems de les línies es quadren en afegir una caixa amb un ample igual i la meitat de l'alçada del gruix de la línia.</dd> +</dl> + +<p>En aquest exemple, dibuixarem tres línies, cadascuna amb un valor diferent per a la propietat <code>lineCap</code>. També afegim dues guies per veure les diferències exactes entre les tres. Cadascuna d'aquestes línies comença i acaba exactament en aquestes guies.</p> + +<p>La línia de l'esquerra utilitza l'opció predeterminada <code>butt</code>. Notarem que està dibuixada completament al ras amb les guies. La segona s'estableix, utilitzant l'opció <code>round</code>. Això afegeix un semicercle al extrem que té un radi de la meitat de l'ample de la línia. La línia de la dreta utilitza l'opció <code>square</code>. Això afegeix una caixa amb un ample igual i la meitat de l'alçada del gruix de la línia.</p> + +<pre class="brush: js;highlight[18]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + var lineCap = ['butt', 'round', 'square']; + + // Draw guides + ctx.strokeStyle = '#09f'; + ctx.beginPath(); + ctx.moveTo(10, 10); + ctx.lineTo(140, 10); + ctx.moveTo(10, 140); + ctx.lineTo(140, 140); + ctx.stroke(); + + // Draw lines + ctx.strokeStyle = 'black'; + for (var i = 0; i < lineCap.length; i++) { + ctx.lineWidth = 15; + ctx.lineCap = lineCap[i]; + ctx.beginPath(); + ctx.moveTo(25 + i * 50, 10); + ctx.lineTo(25 + i * 50, 140); + ctx.stroke(); + } +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>{{EmbedLiveSample("A_lineCap_example", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}</p> + +<h3 id="A_lineJoin_example" name="A_lineJoin_example">Un exemple de <code>lineJoin</code></h3> + +<p>La propietat <code>lineJoin</code> determina com s'uneixen dos segments de connexió (de línies, arcs o corbes) amb longituds diferents de zero en una forma (els segments degenerats amb longituds zero, que els punts finals i punts de control especificats estan exactament en la mateixa posició, s'ometen).</p> + +<p>Hi ha tres possibles valors per a aquesta propietat: <code>round</code>, <code>bevel</code> i <code>miter</code>. Per defecte aquesta propietat s'estableix a <code>miter</code>. Hem de tenir en compte que la configuració <code>lineJoin</code> no té cap efecte si els dos segments connectats tenen la mateixa direcció, ja que en aquest cas no s'afegirà cap àrea d'unió.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/237/Canvas_linejoin.png" style="float: right; height: 190px; width: 190px;"></p> + +<dl> + <dt><code>round</code></dt> + <dd>Arrodoneix les cantonades d'una forma emplenant un sector addicional del disc centrat en el punt final comú dels segments connectats. El radi per a aquestes cantonades arrodonides és igual a la meitat de l'amplada de la línia.</dd> + <dt><code>bevel</code></dt> + <dd>Emplena un àrea triangular addicional entre el punt final comú dels segments connectats i les cantonades rectangulars exteriors separades de cada segment..</dd> + <dt><code>miter</code></dt> + <dd>Els segments connectats s'uneixen estenent les seves vores exteriors per connectar-se en un sol punt, amb l'efecte d'emplenar un àrea addicional en forma de rombe. Aquest ajust s'efectua mitjançant la propietat <code>miterLimit</code>, que s'explica a continuació.</dd> +</dl> + +<p>L'exemple següent dibuixa tres trajectòries diferents, demostrant cadascuna d'aquestes tres configuracions de la propietat <code>lineJoin</code>; la sortida es mostra a dalt..</p> + +<pre class="brush: js;highlight[6]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + var lineJoin = ['round', 'bevel', 'miter']; + ctx.lineWidth = 10; + for (var i = 0; i < lineJoin.length; i++) { + ctx.lineJoin = lineJoin[i]; + ctx.beginPath(); + ctx.moveTo(-5, 5 + i * 40); + ctx.lineTo(35, 45 + i * 40); + ctx.lineTo(75, 5 + i * 40); + ctx.lineTo(115, 45 + i * 40); + ctx.lineTo(155, 5 + i * 40); + ctx.stroke(); + } +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>{{EmbedLiveSample("A_lineJoin_example", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}</p> + +<h3 id="A_demo_of_the_miterLimit_property" name="A_demo_of_the_miterLimit_property"><span id="result_box" lang="ca"><span>Una demostració de la propietat</span></span> <code>miterLimit</code></h3> + +<p>Com s'ha vist en l'exemple anterior, en unir dues línies amb l'opció <code>miter</code>, les vores exteriors de les dues línies d'unió s'estenen fins al punt on es troben. En el cas de línies que tenen angles grans entre si, aquest punt no està lluny del punt de connexió interior. No obstant això, a mesura que els angles entre cada línia disminueixen, la distància (longitud de miter) entre aquests punts augmenta exponencialment.</p> + +<p>La propietat <code>miterLimit</code> determina quant lluny es pot col·locar el punt de connexió exterior des del punt de connexió interior. Si dues línies excedeixen aquest valor, es dibuixa una unió bisellada. S'ha de tenir en compte que la longitud màxima de miter és el producte de l'amplada de línia mesurat en el sistema de coordenades actual, pel valor d'aquesta propietat <code>miterLimit</code> (el valor per defecte és 10.0 en HTML {{HTMLElement("canvas")}}), per la qual cosa <code>miterLimit</code> pot ajustar-se independentment de l'escala de visualització actual o de qualsevol transformació afí de les trajectòries: només influeix en la forma efectiva de les vores de la línia representada.</p> + +<p>Més exactament, el límit de miter és la proporció màxima permesa de la longitud de l'extensió (en el llenç HTML, es mesura entre la cantonada exterior de les vores unides de la línia i el punt final comú dels segments de connexió especificats en la trajectòria) a la meitat de l'ample de la línia. La seva definició equival a la relació màxima permesa entre la distància dels punts interiors i exteriors de la unió de les vores i l'amplada total de la línia. Llavors, aixó és igual a la cosecant de la meitat de l'angle intern mínim dels segments de connexió per sota dels quals no es representarà cap unió miter, sinó només una unió bisellada:</p> + +<ul> + <li><code>miterLimit</code> = <strong>max</strong> <code>miterLength</code> / <code>lineWidth</code> = 1 / <strong>sin</strong> ( <strong>min</strong> <em>θ</em> / 2 )</li> + <li>El límit de miter predeterminat de 10.0 llevarà tots els miters per a angles aguts per sota d'uns 11 graus.</li> + <li>Un límit de miter igual a √2 ≈ 1.4142136 (arrodonit cap amunt) separarà els miters de tots els angles aguts, mantenint les unions de miter solament per als angles obtusos o rectes.</li> + <li>Un límit de miter igual a 1.0 és vàlid, però desactivarà tots els miters.</li> + <li>Els valors inferiors a 1.0 no són vàlids per al límit de miter.</li> +</ul> + +<p>Aquí tenim una petita demostració en la qual es pot configura <code>miterLimit</code> dinàmicament i veure com aquest afecta a les formes en el llenç. Les línies blaves mostren on es troben els punts d'inici i fi per a cadascuna de les línies en el patró de zig-zag.</p> + +<p>Si s'especifica un valor de <code>miterLimit</code> inferior a 4.2, en aquesta demostració, cap de les cantonades visibles s'unirà amb una extensió de miter, només hi haurà un petit bisell prop de les línies blaves; amb un <code>miterLimit</code> superior a 10, la majoria de les cantonades d'aquesta demostració haurien d'unir-se amb un miter allunyat de les línies blaves, i l'alçada del qual disminuiria entre les cantonades, d'esquerra a dreta perquè es connectarien amb angles creixents ; amb valors intermedis, les cantonades del costat esquerre només s'uneixen amb un bisell prop de les línies blaves, i les cantonades del costat dret amb una extensió de miter (també amb una altçada decreixent).</p> + +<pre class="brush: js;highlight[18]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + // Clear canvas + ctx.clearRect(0, 0, 150, 150); + + // Draw guides + ctx.strokeStyle = '#09f'; + ctx.lineWidth = 2; + ctx.strokeRect(-5, 50, 160, 50); + + // Set line styles + ctx.strokeStyle = '#000'; + ctx.lineWidth = 10; + + // check input + if (document.getElementById('miterLimit').value.match(/\d+(\.\d+)?/)) { + ctx.miterLimit = parseFloat(document.getElementById('miterLimit').value); + } else { + alert('Value must be a positive number'); + } + + // Draw lines + ctx.beginPath(); + ctx.moveTo(0, 100); + for (i = 0; i < 24 ; i++) { + var dy = i % 2 == 0 ? 25 : -25; + ctx.lineTo(Math.pow(i, 1.5) * 2, 75 + dy); + } + ctx.stroke(); + return false; +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><table> + <tr> + <td><canvas id="canvas" width="150" height="150"></canvas></td> + <td>Change the <code>miterLimit</code> by entering a new value below and clicking the redraw button.<br><br> + <form onsubmit="return draw();"> + <label>Miter limit</label> + <input type="text" size="3" id="miterLimit"/> + <input type="submit" value="Redraw"/> + </form> + </td> + </tr> +</table></pre> + +<pre class="brush: js">document.getElementById('miterLimit').value = document.getElementById('canvas').getContext('2d').miterLimit; +draw();</pre> +</div> + +<p>{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "https://mdn.mozillademos.org/files/240/Canvas_miterlimit.png")}}</p> + +<h3 id="Ús_de_guions_de_línia">Ús de guions de línia</h3> + +<p>El mètode <code>setLineDash</code> i la propietat <code>lineDashOffset</code> especifiquen el patró de guió per a les línies. El mètode <code>setLineDash</code> accepta una llista de nombres que especifica distàncies per dibuixar alternativament una línia i un buit i la propietat <code>lineDashOffset</code> estableix un desplaçament on començar el patró</p> + +<p>En aquest exemple estem creant un efecte de formigues marxant. És una tècnica d'animació que es troba sovint en les eines de selecció de programes gràfics d'ordinador. Ajuda a l'usuari a distingir la vora de selecció del fons de la imatge, animant la vora. Més endavant, en aquest tutorial, podeu aprendre com fer-ho i altres <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">animacions bàsiques</a>.</p> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="110" height="110"></canvas></pre> +</div> + +<pre class="brush: js;highlight[6]">var ctx = document.getElementById('canvas').getContext('2d'); +var offset = 0; + +function draw() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.setLineDash([4, 2]); + ctx.lineDashOffset = -offset; + ctx.strokeRect(10, 10, 100, 100); +} + +function march() { + offset++; + if (offset > 16) { + offset = 0; + } + draw(); + setTimeout(march, 20); +} + +march();</pre> + +<p>{{EmbedLiveSample("Using_line_dashes", "120", "120", "https://mdn.mozillademos.org/files/9853/marching-ants.png")}}</p> + +<h2 id="Gradients" name="Gradients">Gradients</h2> + +<p>Igual que qualsevol altre programa normal de dibuix , podem emplenar i traçar formes usant, gradients lineals i radials. Es crea un objecte {{domxref("CanvasGradient")}} utilitzant un dels mètodes següents. A continuació, podem assignar aquest objecte a les propietats <code>fillStyle</code> o <code>strokeStyle</code>.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.createLinearGradient", "createLinearGradient(x1, y1, x2, y2)")}}</dt> + <dd>Crea un objecte de degradat lineal amb un punt inicial de (<code>x1</code>, <code>y1</code>) i un punt final de (<code>x2</code>, <code>y2</code>).</dd> + <dt>{{domxref("CanvasRenderingContext2D.createRadialGradient", "createRadialGradient(x1, y1, r1, x2, y2, r2)")}}</dt> + <dd>Crea un degradat radial. Els paràmetres representen dos cercles, un amb el seu centre en (<code>x1</code>, <code>y1</code>) i un radi de <code>r1</code>, i l'altre amb el seu centre en (<code>x2</code>, <code>y2</code>) amb un radi de <code>r2</code>.</dd> +</dl> + +<p>Per exemple:</p> + +<pre class="brush: js">var lineargradient = ctx.createLinearGradient(0, 0, 150, 150); +var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100); +</pre> + +<p>Una vegada s'ha creat un objecte <code>CanvasGradient</code> se li pot assignar colors usant el mètode <code>addColorStop()</code>.</p> + +<dl> + <dt>{{domxref("CanvasGradient.addColorStop", "gradient.addColorStop(position, color)")}}</dt> + <dd>Crea una nova parada de color en l'objecte <code>gradient</code>. <code>position</code> és un nombre entre 0.0 i 1.0 i defineix la posició relativa del color en el degradat, i l'argument <code>color</code>, ha de ser una cadena que representi un {{cssxref("<color>")}} CSS, indicant el color que el gradient ha d'aconseguir en aquest desplaçament en la transició.</dd> +</dl> + +<p>Es pot afegir tantes parades de color, a un gardient, com es necessiti. A continuació, es mostra un gradient lineal molt simple de blanc a negre.</p> + +<pre class="brush: js">var lineargradient = ctx.createLinearGradient(0, 0, 150, 150); +lineargradient.addColorStop(0, 'white'); +lineargradient.addColorStop(1, 'black'); +</pre> + +<h3 id="A_createLinearGradient_example" name="A_createLinearGradient_example"><span id="result_box" lang="ca"><span>Un exemple</span></span> de <code>createLinearGradient</code></h3> + +<p>En aquest exemple, es crearà dos gradientss diferents. Com es podrà veure aquí, tant les propietats <code>strokeStyle</code> com <code>fillStyle</code> poden acceptar un objecte <code>canvasGradient</code> com a entrada vàlida.</p> + +<pre class="brush: js;highlight[5,11]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + // Create gradients + var lingrad = ctx.createLinearGradient(0, 0, 0, 150); + lingrad.addColorStop(0, '#00ABEB'); + lingrad.addColorStop(0.5, '#fff'); + lingrad.addColorStop(0.5, '#26C000'); + lingrad.addColorStop(1, '#fff'); + + var lingrad2 = ctx.createLinearGradient(0, 50, 0, 95); + lingrad2.addColorStop(0.5, '#000'); + lingrad2.addColorStop(1, 'rgba(0, 0, 0, 0)'); + + // assign gradients to fill and stroke styles + ctx.fillStyle = lingrad; + ctx.strokeStyle = lingrad2; + + // draw shapes + ctx.fillRect(10, 10, 130, 130); + ctx.strokeRect(50, 50, 50, 50); + +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>El primer és un gradient de fons. Com es veu, s'assignen dos colors a la mateixa posició. Això es fa per fer transicions de color molt nítides, en aquest cas del blanc al verd. No importa en quina ordre es defineixin les parades de color, però en aquest cas especial, ho fa de forma significativa. Si es mantenen les tasques en l'ordre en què es desitja que apareguin, això no serà un problema.</p> + +<p>En el segon gradient, no s'assigna el color inicial (a la posició 0.0), ja que no és estrictament necessari, perquè automàticament assumirà el color de la següent parada de color. Per tant, l'assignació del color negre en la posició 0.5, automàticament fa que el gradient, des de l'inici fins a aquest punt, sigui negre.</p> + +<p>{{EmbedLiveSample("A_createLinearGradient_example", "180", "180", "https://mdn.mozillademos.org/files/235/Canvas_lineargradient.png")}}</p> + +<h3 id="A_createRadialGradient_example" name="A_createRadialGradient_example"><span id="result_box" lang="ca"><span>Un exemple</span></span> de <code>createRadialGradient</code></h3> + +<p>En aquest exemple, definim quatre gradients radials diferents. Com que tenim el control sobre els punts d'inici i de tancament del gradient, podem aconseguir efectes més complexos del que normalment tindríem en els gradients radials "clàssics" que veiem, per exemple, en Photoshop (és a dir, un gradient amb un únic punt central, on el gradient s'expandeix cap a l'exterior en forma circular).</p> + +<pre class="brush: js;highlight[5,10,15,20]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + // Create gradients + var radgrad = ctx.createRadialGradient(45, 45, 10, 52, 50, 30); + radgrad.addColorStop(0, '#A7D30C'); + radgrad.addColorStop(0.9, '#019F62'); + radgrad.addColorStop(1, 'rgba(1, 159, 98, 0)'); + + var radgrad2 = ctx.createRadialGradient(105, 105, 20, 112, 120, 50); + radgrad2.addColorStop(0, '#FF5F98'); + radgrad2.addColorStop(0.75, '#FF0188'); + radgrad2.addColorStop(1, 'rgba(255, 1, 136, 0)'); + + var radgrad3 = ctx.createRadialGradient(95, 15, 15, 102, 20, 40); + radgrad3.addColorStop(0, '#00C9FF'); + radgrad3.addColorStop(0.8, '#00B5E2'); + radgrad3.addColorStop(1, 'rgba(0, 201, 255, 0)'); + + var radgrad4 = ctx.createRadialGradient(0, 150, 50, 0, 140, 90); + radgrad4.addColorStop(0, '#F4F201'); + radgrad4.addColorStop(0.8, '#E4C700'); + radgrad4.addColorStop(1, 'rgba(228, 199, 0, 0)'); + + // draw shapes + ctx.fillStyle = radgrad4; + ctx.fillRect(0, 0, 150, 150); + ctx.fillStyle = radgrad3; + ctx.fillRect(0, 0, 150, 150); + ctx.fillStyle = radgrad2; + ctx.fillRect(0, 0, 150, 150); + ctx.fillStyle = radgrad; + ctx.fillRect(0, 0, 150, 150); +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>En aquest cas, hem desplaçat lleugerament el punt d'inici des del punt final per aconseguir un efecte 3D esfèric. Lo millor es tractar d'evitar que els cercles interns i externs se superposin, ja que això genera efectes estranys que són difícils de predir.</p> + +<p>L'última parada de color en cadascun dels quatre gradients, utilitza un color completament transparent. Si es desitja tenir una bona transició, d'aquesta a la parada de color anterior, tots dos colors han de ser iguals. Això no és molt obvi del codi, perquè utilitza dos mètodes de color CSS diferents com a demostració, però en el primer gradient <code>#019F62 = rgba(1,159,98,1)</code>.</p> + +<p>{{EmbedLiveSample("A_createRadialGradient_example", "180", "180", "https://mdn.mozillademos.org/files/244/Canvas_radialgradient.png")}}</p> + +<h2 id="Patterns" name="Patterns">Patrons</h2> + +<p>En un dels exemples de la pàgina anterior, hem utilitzat una sèrie de bucles per crear un patró d'imatges. Hi ha, però, un mètode molt més senzill: el mètode <code>createPattern()</code>.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.createPattern", "createPattern(image, type)")}}</dt> + <dd>Crea i retorna un nou objecte de patró canvas. <code>image</code> es un {{domxref("CanvasImageSource")}} (és a dir, un {{domxref("HTMLImageElement")}}, altre llenç, un element {{HTMLElement("video")}} o similar. <code>type</code> és una cadena que indica com utilitzar la imatge.</dd> +</dl> + +<p>Type, especifica com utilitzar la imatge per crear el patró, i ha de ser un dels següents valors de cadena:</p> + +<dl> + <dt><code>repeat</code></dt> + <dd>Teixeix la imatge en ambdues direccions vertical i horitzontal.</dd> + <dt><code>repeat-x</code></dt> + <dd>Teixeix la imatge horitzontalment però no verticalment.</dd> + <dt><code>repeat-y</code></dt> + <dd>Teixeix la imatge verticalment però no horitzontalment.</dd> + <dt><code>no-repeat</code></dt> + <dd>No teixeix la imatge. S'utilitza només una vegada.</dd> +</dl> + +<p>S'utilitzar aquest mètode per crear un objecte {{domxref("CanvasPattern")}} que és molt similar als mètodes de gradient que hem vist anteriorment. Una vegada que s'ha creat un patró, se li pot assignar les propietats <code>fillStyle</code> o <code>strokeStyle</code>. Per exemple:</p> + +<pre class="brush: js">var img = new Image(); +img.src = 'someimage.png'; +var ptrn = ctx.createPattern(img, 'repeat'); +</pre> + +<div class="note"> +<p><strong>Nota:</strong> Igual que amb el mètode <code>drawImage()</code>, ens hem d'assegurar que la imatge que utilitzem s'hagi carregat abans de cridar a aquest mètode o que el patró es dibuixi incorrectament.</p> +</div> + +<h3 id="A_createPattern_example" name="A_createPattern_example"><span id="result_box" lang="ca"><span>Un exemple</span></span> de <code>createPattern</code></h3> + +<p>En aquest últim exemple, crearem un patró per assignar a la propietat <code>fillStyle</code>. L'únic que cal esmentar, és l'ús del controlador <code>onload</code> de la imatge. Això és per assegurar-se de que la imatge es carregui abans que s'assigni el patró.</p> + +<pre class="brush: js;highlight[10]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + // create new image object to use as pattern + var img = new Image(); + img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png'; + img.onload = function() { + + // create pattern + var ptrn = ctx.createPattern(img, 'repeat'); + ctx.fillStyle = ptrn; + ctx.fillRect(0, 0, 150, 150); + + } +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js">draw();</pre> + +<p><span class="short_text" id="result_box" lang="ca"><span>El resultat és així:</span></span></p> +</div> + +<p>{{EmbedLiveSample("A_createPattern_example", "180", "180", "https://mdn.mozillademos.org/files/222/Canvas_createpattern.png")}}</p> + +<h2 id="Ombres_(Shadows)">Ombres (Shadows)</h2> + +<p>L'ús d'ombres implica només quatre propietats:</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX = float")}}</dt> + <dd>Indica la distància horitzontal que l'ombra ha d'estendre's des de l'objecte. Aquest valor no es veu afectat per la matriu de transformació. El valor predeterminat és 0.</dd> + <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY = float")}}</dt> + <dd>Indica la distància vertical que l'ombra ha d'estendre's des de l'objecte. Aquest valor no es veu afectat per la matriu de transformació. El valor predeterminat és 0.</dd> + <dt>{{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur = float")}}</dt> + <dd>Indica la grandària de l'efecte de desenfocament; aquest valor no es correspon a un nombre de píxels i no es veu afectat per la matriu de transformació actual. El valor per defecte és 0.</dd> + <dt>{{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor = color")}}</dt> + <dd>Un valor de color CSS estàndard, que indica el color de l'efecte d'ombra; per defecte, és negre completament transparent.</dd> +</dl> + +<p>Les propietats <code>shadowOffsetX</code> i <code>shadowOffsetY</code> indiquen fins a on ha d'estendre's l'ombra des de l'objecte en les direccions X i Y; aquests valors no es veuen afectats per la matriu de transformació actual. Utilitzar valors negatius per fer que l'ombra s'estengui cap amunt o cap a l'esquerra, i valors positius perquè l'ombra s'estengui cap avall o cap a la dreta. Tots dos són 0 per defecte.</p> + +<p>La propietat <code>shadowBlur</code> indica la grandària de l'efecte de desenfocament; aquest valor no es correspon a un nombre de píxels i no es veu afectat per la matriu de transformació actual. El valor per defecte és 0.</p> + +<p>La propietat <code>shadowColor</code> és un valor de color CSS estàndard, que indica el color de l'efecte d'ombra; per defecte, és negre completament transparent.</p> + +<div class="note"> +<p><strong>Nota:</strong> Les ombres només es dibuixen per a <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing">operacions de composició</a> de <code>fonts</code>.</p> +</div> + +<h3 id="Un_exemple_de_text_ombrejat"><span id="result_box" lang="ca"><span>Un exemple de text ombrejat</span></span></h3> + +<p><span id="result_box" lang="ca"><span>Aquest exemple dibuixa una cadena de text amb un efecte d'ombra</span></span>.</p> + +<pre class="brush: js;highlight[4,5,6,7]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + ctx.shadowOffsetX = 2; + ctx.shadowOffsetY = 2; + ctx.shadowBlur = 2; + ctx.shadowColor = 'rgba(0, 0, 0, 0.5)'; + + ctx.font = '20px Times New Roman'; + ctx.fillStyle = 'Black'; + ctx.fillText('Sample String', 5, 30); +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="80"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>{{EmbedLiveSample("A_shadowed_text_example", "180", "100", "https://mdn.mozillademos.org/files/2505/shadowed-string.png")}}</p> + +<p>Veurem la propietat <code>font</code> i el mètode <code>fillText</code> en el següent capítol sobre com <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text">dibuixar text</a>.</p> + +<h2 id="Regles_de_farciment_del_llenç">Regles de farciment del llenç</h2> + +<p>Quan s'utilitza <code>fill</code> (o {{domxref("CanvasRenderingContext2D.clip", "clip")}} i {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}}) es pot proporcionar opcionalment un algorisme de regles de farciment per determinar si un punt està dins o fora d'una trajectòria i, per tant, si s'emplena o no. Això és útil quan una trajectòria es creua o es nia.<br> + <br> + Dos valors són possibles:</p> + +<ul> + <li><code><strong>"nonzero</strong></code>": La <a class="external external-icon" href="http://en.wikipedia.org/wiki/Nonzero-rule">regla de direcció de traçat distint de zero</a>, que és la regla per defecte.</li> + <li><code><strong>"evenodd"</strong></code>: La <a class="external external-icon" href="http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule">regla de direcció de traçat parell-imparell</a>.</li> +</ul> + +<p>En aquest exemple estem usant la regla <code>evenodd</code>.</p> + +<pre class="brush: js;highlight[6]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + ctx.beginPath(); + ctx.arc(50, 50, 30, 0, Math.PI * 2, true); + ctx.arc(50, 50, 15, 0, Math.PI * 2, true); + ctx.fill('evenodd'); +}</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="100" height="100"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>{{EmbedLiveSample("Canvas_fill_rules", "110", "110", "https://mdn.mozillademos.org/files/9855/fill-rule.png")}}</p> + +<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}</p> diff --git a/files/ca/web/api/canvas_api/tutorial/composició/index.html b/files/ca/web/api/canvas_api/tutorial/composició/index.html new file mode 100644 index 0000000000..e556e911d4 --- /dev/null +++ b/files/ca/web/api/canvas_api/tutorial/composició/index.html @@ -0,0 +1,113 @@ +--- +title: Composició i retall +slug: Web/API/Canvas_API/Tutorial/Composició +tags: + - Canvas + - Graphics + - HTML + - HTML5 + - Intermediate + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Compositing +--- +<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}</div> + +<div class="summary"> +<p>En tots els nostres <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations">exemples anteriors</a>, les formes sempre s'han dibuixat una damunt de l'altra. Això és més que adequat per a la majoria de les situacions, però limita l'ordre en què es construeixen formes compostes. No obstant això, podem canviar aquest comportament establint la propietat <code>globalCompositeOperation</code>. A més, la propietat <code>clip</code> permet ocultar parts de formes no desitjades.</p> +</div> + +<h2 id="globalCompositeOperation" name="globalCompositeOperation"><code>globalCompositeOperation</code></h2> + +<p>No només podem dibuixar noves formes darrere de les formes existents, sinó que també, podem utilitzar-ho per emmascarar certes àrees, esborrar seccions del llenç (no limitades a rectangles, com ho fa el mètode {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}) i molt més.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation = type")}}</dt> + <dd>Estableix el tipus d'operació de composició que s'aplicarà en dibuixar noves formes, on el tipus és una cadena que identifica quina de les dotze operacions de composició ha d'utilitzar-se.</dd> +</dl> + +<p>Veure <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing/Example">exemples de composició</a> per al codi dels següents exemples.</p> + +<p>{{EmbedLiveSample("Compositing_example", 750, 6750, "" ,"Web/API/Canvas_API/Tutorial/Compositing/Example")}}</p> + +<h2 id="Clipping_paths" name="Clipping_paths">Trajectòries de retall</h2> + +<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/209/Canvas_clipping_path.png" style="float: right;">Una trajectòria de retall és com una forma de llenç normal, però actua com una màscara per ocultar parts no desitjades de formes. Això es visualitza en la imatge de la dreta. La forma d'estel vermell és la nostre trajectòria de retall. Tot el que queda fora d'aquesta trajectòria no es dibuixarà en el llenç.</p> + +<p>Si comparem les trajectòries de retall amb la propietat <code>globalCompositeOperation</code>, que hem vist anteriorment, veiem dos modes de composició que aconsegueixen més o menys el mateix efecte en <code>source-in</code> i <code>source-atop</code>. Les diferències més importants entre les dues, són que les trajectòries de retall mai es dibuixen realment al llenç i la trajectòria de retall mai es veu afectada per l'addició de noves formes. Això fa que les trajectòries de retall siguin ideals per dibuixar múltiples formes en un àrea restringida</p> + +<p>En el capítol sobre <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes">dibuixar formes</a>, només s'ha esmentat els mètodes <code>stroke()</code> i <code>fill()</code>, però hi ha un tercer mètode que es pot utilitzar amb les trajectòries, anomenat <code>clip()</code>.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.clip", "clip()")}}</dt> + <dd>Converteix la trajectòria que s'està construint, en la trajectòria de retall actual.</dd> +</dl> + +<p>Utilitzar <code>clip()</code> en lloc de <code>closePath()</code> per tancar una trajectòria i convertir-la en una trajectòria de retall en lloc de traçar o emplenar la trajectòria.</p> + +<p>Per defecte, l'element {{HTMLElement("canvas")}}, té una trajectòria de retall de la mateixa grandària que el propi llenç. En altres paraules, no es produeix cap retall.</p> + +<h3 id="A_clip_example" name="A_clip_example">Un exemple de <code>clip</code></h3> + +<p>En aquest exemple, utilitzarem un trajectòria de retall circular per restringir el dibuix d'un conjunt d'estels aleatòries a una regió en particular.</p> + +<pre class="brush: js;highlight[9]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + ctx.fillRect(0, 0, 150, 150); + ctx.translate(75, 75); + + // Crea una trajectòria de retall circular + ctx.beginPath(); + ctx.arc(0, 0, 60, 0, Math.PI * 2, true); + ctx.clip(); + + // dibuixa el fons + var lingrad = ctx.createLinearGradient(0, -75, 0, 75); + lingrad.addColorStop(0, '#232256'); + lingrad.addColorStop(1, '#143778'); + + ctx.fillStyle = lingrad; + ctx.fillRect(-75, -75, 150, 150); + + // dibuixa els estels + for (var j = 1; j < 50; j++) { + ctx.save(); + ctx.fillStyle = '#fff'; + ctx.translate(75 - Math.floor(Math.random() * 150), + 75 - Math.floor(Math.random() * 150)); + drawStar(ctx, Math.floor(Math.random() * 4) + 2); + ctx.restore(); + } + +} + +function drawStar(ctx, r) { + ctx.save(); + ctx.beginPath(); + ctx.moveTo(r, 0); + for (var i = 0; i < 9; i++) { + ctx.rotate(Math.PI / 5); + if (i % 2 === 0) { + ctx.lineTo((r / 0.525731) * 0.200811, 0); + } else { + ctx.lineTo(r, 0); + } + } + ctx.closePath(); + ctx.fill(); + ctx.restore(); +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>En les primeres línies de codi, dibuixem un rectangle negre de la grandària del llenç com a fons, després traslladem l'origen al centre. A continuació, creem la trajectòria de retall circular, dibuixant un arc i cridem <code>clip()</code>. Les trajectòries de retall també formen part de l'estat de guardat del llenç. Si haguéssim volgut mantenir la trajectòria de retall original, podríem haver guardat l'estat del llenç abans de crear el nou.</p> + +<p>Tot el que es dibuixa després de crear la trajectòria de retall, només apareixerà dins d'aquesta trajectòria. Es pot veure això clarament, en el gradient lineal que es dibuixa a continuació. Després d'això, es dibuixa un conjunt de 50 estels posicionats aleatòriament i escalats, usant la funció personalitzada <code>drawStar()</code>. De nou, els estels, només apareixen dins de la trajectòria de retall definida.</p> + +<p>{{EmbedLiveSample("A_clip_example", "180", "180", "https://mdn.mozillademos.org/files/208/Canvas_clip.png")}}</p> + +<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}</p> diff --git a/files/ca/web/api/canvas_api/tutorial/dibuixar_text/index.html b/files/ca/web/api/canvas_api/tutorial/dibuixar_text/index.html new file mode 100644 index 0000000000..37b730176a --- /dev/null +++ b/files/ca/web/api/canvas_api/tutorial/dibuixar_text/index.html @@ -0,0 +1,165 @@ +--- +title: Dibuixar text +slug: Web/API/Canvas_API/Tutorial/Dibuixar_text +tags: + - Canvas + - Graphics + - Intermediate + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Drawing_text +--- +<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}</div> + +<div class="summary"> +<p>Després d'haver vist com <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">aplicar estils i colors</a> en el capítol anterior, ara veurem com dibuixar text sobre canvas.</p> +</div> + +<h2 id="Dibuixar_text">Dibuixar text</h2> + +<p>El context de representació de canvas proporciona dos mètodes per representar el text:</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.fillText", "fillText(text, x, y [, maxWidth])")}}</dt> + <dd>Omple un text donat en la posició donada (x, y). Opcionalment amb ample màxim per dibuixar.</dd> + <dt>{{domxref("CanvasRenderingContext2D.strokeText", "strokeText(text, x, y [, maxWidth])")}}</dt> + <dd>Traça un text donat en la posició donada (x, y). Opcionalment amb ample màxim per dibuixar.</dd> +</dl> + +<h3 id="Un_exemple_de_fillText">Un exemple de <code>fillText</code></h3> + +<p><span class="short_text" id="result_box" lang="ca"><span>El text s'omple usant l'actual</span></span> <code>fillStyle</code>.</p> + +<pre class="brush: js;highlight[4]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + ctx.font = '48px serif'; + ctx.fillText('Hello world', 10, 50); +}</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="300" height="100"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>{{EmbedLiveSample("A_fillText_example", 310, 110)}}</p> + +<h3 id="Un_exemple_de_strokeText">Un exemple de <code>strokeText</code></h3> + +<p><span class="short_text" id="result_box" lang="ca"><span>El text s'omple usant l'actual</span></span> <code>strokeStyle</code>.</p> + +<pre class="brush: js;highlight[4]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + ctx.font = '48px serif'; + ctx.strokeText('Hello world', 10, 50); +}</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="300" height="100"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>{{EmbedLiveSample("A_strokeText_example", 310, 110)}}</p> + +<h2 id="Estil_de_text">Estil de text</h2> + +<p>En els exemples anteriors ja hem fet ús de la propietat <code>font</code> per fer el text una mica més gran que la grandària predeterminada. Hi ha algunes propietats més que permeten ajustar la forma en què el text es mostra en el llenç:</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.font", "font = value")}}</dt> + <dd>L'estil de text actual que s'utilitza en dibuixar text. Aquesta cadena utilitza la mateixa sintaxi que la propietat <a href="/en-US/docs/Web/CSS">CSS</a> {{cssxref("font")}}. La font predeterminada és 10px sans-serif.</dd> + <dt>{{domxref("CanvasRenderingContext2D.textAlign", "textAlign = value")}}</dt> + <dd>Configuració de l'alineació del text. Valors possibles: <code>start</code>, <code>end</code>, <code>left</code>, <code>right</code> o <code>center</code>. El valor predeterminat és <code>start</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline = value")}}</dt> + <dd>Configuració d'alineació de la línia de base. Valors possibles: <code>top</code>, <code>hanging</code>, <code>middle</code>, <code>alphabetic</code>, <code>ideographic</code>, <code>bottom</code>. El valor predeterminat és <code>alphabetic</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.direction", "direction = value")}}</dt> + <dd>Direccionalitat. Valors possibles: <code>ltr</code>, <code>rtl</code>, <code>inherit</code>. El valor predeterminat és <code>inherit</code>.</dd> +</dl> + +<p>Aquestes propietats poden ser familiars, si heu treballat abans amb CSS.</p> + +<p>El següent diagrama del <a class="external" href="http://www.whatwg.org/" title="http://www.whatwg.org/">WHATWG</a> mostra les diverses línies de base compatibles amb la propietat <code>textBaseline</code>.<img alt="La part superior del quadrat em està aproximadament en la part superior dels glifos en una font, la línia de base penjant és on alguns glifos com आ estan ancorats, el mitjà està a mig camí entre la part superior del quadrat em i la part inferior del quadrat em,la línia de base alfabètica és on ancoren caràcters com Á, ÿ, +f i Ω, la línia de base ideográfica és on glifos com 私 i 達 estan ancorats, i la part inferior del quadrat em està aproximadament en la part inferior dels glifos en una font. La part superior i inferior del quadre delimitador pot estar lluny d'aquestes línies de base, a causa que els glifos s'estenen molt més allà del quadrat em." src="http://www.whatwg.org/specs/web-apps/current-work/images/baselines.png"></p> + +<h3 id="Un_exemple_de_textBaseline">Un exemple de textBaseline</h3> + +<p>Editeu el codi següent i vegeu els canvis actualitzats en directe en el llenç:</p> + +<pre class="brush: js;highlight[2]">ctx.font = '48px serif'; +ctx.textBaseline = 'hanging'; +ctx.strokeText('Hello world', 0, 100); +</pre> + +<div class="hidden"> +<h6 id="Playable_code" name="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.font = "48px serif"; +ctx.textBaseline = "hanging"; +ctx.strokeText("Hello world", 0, 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="Mesures_avançades_de_text">Mesures avançades de text</h2> + +<p>En el cas de necessitar obtenir més detalls sobre el text, el següent mètode permet mesurar-ho.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.measureText", "measureText()")}}</dt> + <dd>Retorna un objecte {{domxref("TextMetrics")}} que conté l'amplada, en píxels, que serà el text especificat quan es dibuixi en l'estil de text actual.</dd> +</dl> + +<p>El següent fragment de codi mostra com es pot mesurar un text i obtenir la seva amplada</p> + +<pre class="brush: js;highlight[3]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + var text = ctx.measureText('foo'); // TextMetrics object + text.width; // 16; +} +</pre> + +<h2 id="Notes_específiques_de_Gecko"><span class="s3gt_translate_tooltip_variant" id="s3gt_translate_tooltip_variant_to_id_0">Notes específiques de Gecko</span></h2> + +<p>En Gecko (el motor de representació de Firefox, Firefox OS i altres aplicacions basades en Mozilla), es van implementar algunes <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#Prefixed_APIs">APIs prefixades</a> en versions anteriors per dibuixar text en un llenç. Ara estan desaprovades i eliminades, ja no es garanteix el seu funcionament.</p> + +<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}</p> + +<div class="s3gt_translate_tooltip_mini_box" id="s3gt_translate_tooltip_mini" style="position: absolute; left: 348px; top: 2154px;"> +<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_logo" title="Traducir texto seleccionado"> </div> + +<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_sound" title="Reproducir"> </div> + +<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_copy" title="Copy text to Clipboard"> </div> +</div> diff --git a/files/ca/web/api/canvas_api/tutorial/drawing_shapes/index.html b/files/ca/web/api/canvas_api/tutorial/drawing_shapes/index.html new file mode 100644 index 0000000000..6e8162ac44 --- /dev/null +++ b/files/ca/web/api/canvas_api/tutorial/drawing_shapes/index.html @@ -0,0 +1,579 @@ +--- +title: Dibuix de formes amb canvas +slug: Web/API/Canvas_API/Tutorial/Drawing_shapes +tags: + - Canvas + - Graphics + - HTML + - HTML Canvas + - HTML5 + - Intermediate + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Drawing_shapes +--- +<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}</div> + +<div class="summary"> +<p>Ara que hem configurat el nostre <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage">entorn canvas</a>, podem entrar en els detalls de com dibuixar sobre el llenç. Al final d'aquest article, haureu après a dibuixar rectangles, triangles, línies, arcs i corbes, proporcionant-vos familiaritat amb algunes de les formes bàsiques. Treballar amb camins és essencial a l'hora de dibuixar objectes sobre el llenç i veurem com fer-ho.</p> +</div> + +<h2 id="La_graella">La graella</h2> + +<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/224/Canvas_default_grid.png" style="float: right; height: 220px; width: 220px;">Abans de poder començar a dibuixar, hem de parlar sobre la graella canvas o <strong>coordinar l'espai</strong>. El nostre esquelet HTML de la pàgina anterior tenia un element canvas amb 150 píxels d'amplada i 150 píxels d'alçada. A la dreta, veureu aquest llenç amb la graella predeterminada superposada. Normalment, una unitat de la graella correspon a 1 píxel sobre el llenç. L'origen d'aquesta graella es posiciona a la cantonada <em>superior esquerra</em> a la coordenada (0,0). Tots els elements es col·loquen en relació amb aquest origen. Per tant, la posició de la cantonada superior esquerra del quadrat blau es converteix en x pixels des de l'esquerra i y pixels des de la part superior, en la coordenada (x,y). Més endavant, en aquest tutorial veurem com podem traduir l'origen a una posició diferent, girar la graella i fins i tot escalar-la, però de moment ens quedarem amb el valor predeterminat.</p> + +<h2 id="Dibuixar_rectangles">Dibuixar rectangles</h2> + +<p>A diferència de {{Glossary("SVG")}}, {{HTMLElement("canvas")}} només suporta una forma primitiva: rectangles. Totes les altres formes han de crear-se combinant una o més trajectòries, llistes de punts connectats per línies. Afortunadament, tenim una gran varietat de funcions de dibuix de trajectòria que permeten compondre formes molt complexes.</p> + +<p>Primer vegem el rectangle. Hi ha tres funcions que dibuixen rectangles en canvas:</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.fillRect", "fillRect(x, y, width, height)")}}</dt> + <dd>Dibuixa un rectangle ple.</dd> + <dt>{{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect(x, y, width, height)")}}</dt> + <dd>Dibuixa un contorn rectangular.</dd> + <dt>{{domxref("CanvasRenderingContext2D.clearRect", "clearRect(x, y, width, height)")}}</dt> + <dd>Esborra l'àrea rectangular especificada, fent-la completament transparent</dd> +</dl> + +<p>Cadascuna d'aquestes tres funcions pren els mateixos paràmetres. <code>x</code> i <code>y</code> indiquen la posició en el llenç (relativa a l'origen) de la cantonada superior esquerra del rectangle. <code>width</code> i <code>height</code> proporcionen la grandària del rectangle</p> + +<p>A sota hi ha la funció <code>draw()</code> de la pàgina anterior, però ara fa ús d'aquestes tres funcions.</p> + +<h3 id="Exemple_de_forma_rectangular">Exemple de forma rectangular</h3> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> +</div> + +<pre class="brush: js">function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + + ctx.fillRect(25, 25, 100, 100); + ctx.clearRect(45, 45, 60, 60); + ctx.strokeRect(50, 50, 50, 50); + } +}</pre> + +<p><span id="result_box" lang="ca"><span>La sortida d'aquest exemple es mostra a continuació</span></span>.</p> + +<p>{{EmbedLiveSample("Rectangular_shape_example", 160, 160, "https://mdn.mozillademos.org/files/245/Canvas_rect.png")}}</p> + +<p>La funció <code>fillRect()</code> dibuixa un quadrat negre de 100 píxels a cada costat. La funció <code>clearRect()</code> esborra un quadrat de 60x60 píxels del centre, i a continuació es crida a <code>strokeRect()</code> per crear un contorn rectangular de 50x50 píxels dins del quadrat buidat.</p> + +<p>A les properes pàgines veurem dos mètodes alternatius per <code>clearRect()</code>, i també veurem com canviar l'estil de color i traç de les formes representades.</p> + +<p>A diferència de les funcions de trajectòria, que veurem en la següent secció, les tres funcions rectangulars dibuixen immediatament al llenç.</p> + +<h2 id="Dibuixar_trajectories">Dibuixar trajectories</h2> + +<p>Les úniques altres formes primitives són les <em>trajectòries</em>. Una trajectòria és una llista de punts, connectats per segments de línies que poden ser de diferents formes, corbes o no, de diferent amplària i de diferent color. Un trajectòria, o fins i tot una subtrajecte, pot ser tancada. Per fer formes utilitzant trajectòries, es prenen alguns passos addicionals:</p> + +<ol> + <li>Primer, crea la trajectòria.</li> + <li>A continuació, utilitzar <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#Paths">ordres de dibuix</a> per dibuixar en la trajectòria.</li> + <li>Després, tancar la trajectòria.</li> + <li>Una vegada que s'ha creat la trajectòria, podeu traçar o omplir la trajectòria per representar-la</li> +</ol> + +<p>A continuació, es detallen les funcions que s'utilitzen per realitzar aquests passos:</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}}</dt> + <dd>Crea una trajectòria nova. Una vegada creada, les futures ordres de dibuix s'aplican a la trajectòria i són utilitzades per construir-la.</dd> + <dt><a href="/en-US/docs/Web/API/CanvasRenderingContext2D#Paths">Mètodes de trajectòria</a></dt> + <dd>Mètodes per establir diferentes trajectòries d'objectes.</dd> + <dt>{{domxref("CanvasRenderingContext2D.closePath", "closePath()")}}</dt> + <dd>Afegeix una línia recta a la trajectòria, anant a l'inici de la subruta actual.</dd> + <dt>{{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}</dt> + <dd>Dibuixa la forma traçant el seu contorn.</dd> + <dt>{{domxref("CanvasRenderingContext2D.fill", "fill()")}}</dt> + <dd>Dibuixa una forma sòlida emplenant l'àrea de contingut de la trajectòria.</dd> +</dl> + +<p>El primer pas per crear una trajectòria és cridar a <code>beginPath()</code>. Internament, les trajectòries s'emmagatzemen com una llista de subtrayectes (línies, arcs, etc.) que formen una forma. Cada vegada que es crida a aquest mètode, la llista es reinicia i podem començar a dibuixar noves formes.</p> + +<div class="note"><strong>Nota:</strong> Quan la trajectòria actual està buida, com immediatament després de cridar <code>beginPath()</code>, o en un llenç recentment creat, la primera ordre de construcció de la trajectòria sempre es tractarà com <code>moveTo()</code>, independentment del que realment sigui. Per aquesta raó, gairebé sempre voldreu establir específicament la seva posició inicial després de restablir una trajectòria.</div> + +<p>El segon pas és cridar als mètodes que realment especifiquen les trajectòries que s'han de dibuixar. Ho veurem en breu.</p> + +<p>El tercer, i com a pas opcional, és cridar <code>closePath()</code>. Aquest mètode intenta tancar la forma, dibuixant una recta des del punt actual fins al començament. Si la forma ja s'ha tancat o només hi ha un punt a la llista, aquesta funció no fa res.</p> + +<div class="note"><strong>Nota:</strong> Quan crideu <code>fill()</code>, totes les formes obertes es tanquen automàticament, de manera que no heu de cridar <code>closePath()</code>. Aquest <strong>no</strong> és el cas quan es crida <code>stroke()</code>.</div> + +<h3 id="Dibuixar_un_triangle">Dibuixar un triangle</h3> + +<p>Per exemple, el codi per dibuixar un triangle es veuria així:</p> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="100" height="100"></canvas> + </body> +</html> +</pre> +</div> + +<pre class="brush: js">function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + + ctx.beginPath(); + ctx.moveTo(75, 50); + ctx.lineTo(100, 75); + ctx.lineTo(100, 25); + ctx.fill(); + } +} +</pre> + +<p><span class="short_text" id="result_box" lang="ca"><span>El resultat és així</span></span>:</p> + +<p>{{EmbedLiveSample("Drawing_a_triangle", 110, 110, "https://mdn.mozillademos.org/files/9847/triangle.png")}}</p> + +<h3 id="Moure_el_llapis">Moure el llapis</h3> + +<p>Una funció molt útil, que en realitat no dibuixa res però es converteix en part de la llista de trajectòries descrita anteriorment, és la funció <code>moveTo()</code>. Probablement el millor sigui pensar en això com aixecar un bolígraf o un llapis d'un lloc en un tros de paper i col·locar-ho en el següent.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.moveTo", "moveTo(x, y)")}}</dt> + <dd>Mou el llapis a les coordenades especificades per <code>x</code> i <code>y</code>.</dd> +</dl> + +<p>Quan s'inicialitza el llenç o es crida <code>beginPath()</code> normalment voldreu utilitzar la funció <code>moveTo()</code> per col·locar el punt de partida en un altre lloc. També podrieu utilitzar <code>moveTo()</code> per dibuixar trajectòries no connectades. Feu un cop d'ull a la cara somrient d'a baix</p> + +<p>Proveu-ho vosaltres mateixos, podeu utilitzar el fragment de codi que es mostra a continuació. Simplement enganxeu-lo a la funció <code>draw()</code> que vam veure anteriorment.</p> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> +</div> + +<pre class="brush: js;highlight:[8,10,12]">function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + + ctx.beginPath(); + ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Outer circle + ctx.moveTo(110, 75); + ctx.arc(75, 75, 35, 0, Math.PI, false); // Mouth (clockwise) + ctx.moveTo(65, 65); + ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // Left eye + ctx.moveTo(95, 65); + ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // Right eye + ctx.stroke(); + } +} +</pre> + +<p><span class="short_text" id="result_box" lang="ca"><span>El resultat és així</span></span>:</p> + +<p>{{EmbedLiveSample("Moving_the_pen", 160, 160, "https://mdn.mozillademos.org/files/252/Canvas_smiley.png")}}</p> + +<p>Si voleu veure les línies de connexió, podeu eliminar les línies que criden <code>moveTo()</code>.</p> + +<div class="note"> +<p><strong>Nota:</strong> Per obtenir més informació sobre la funció <code>arc()</code>, vegeu {{anch("Arcs")}} a continuació.</p> +</div> + +<h3 id="Línies">Línies</h3> + +<p>Per dibuixar línies rectes, utilitzeu el mètode <code>lineTo()</code>.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.lineTo", "lineTo(x, y)")}}</dt> + <dd>Dibuixa una línia des de la posició del dibuix actual fins a la posició especificada per <code>x</code> i <code>y</code>.</dd> +</dl> + +<p>Aquest mètode pren dos arguments, <code>x</code> i <code>y</code>, que són les coordenades del punt final de la línia. El punt de partida depèn de les trajectòries prèviament traçades, on el punt final de la trajectòria anterior és el punt de partida de la següent, etc. El punt de partida també es pot canviar utilitzant el mètode <code>moveTo()</code>.</p> + +<p>L'exemple següent dibuixa dos triangles, un omplert i un altre delineat.</p> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> +</div> + +<pre class="brush: js;highlight[9,10,16,17]">function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + + // Filled triangle + ctx.beginPath(); + ctx.moveTo(25, 25); + ctx.lineTo(105, 25); + ctx.lineTo(25, 105); + ctx.fill(); + + // Stroked triangle + ctx.beginPath(); + ctx.moveTo(125, 125); + ctx.lineTo(125, 45); + ctx.lineTo(45, 125); + ctx.closePath(); + ctx.stroke(); + } +} +</pre> + +<p>Això comença cridant <code>beginPath()</code> per iniciar una nova trajectòria de forma. Seguidament, utilitzem el mètode <code>moveTo()</code> per moure el punt de partida a la posició desitjada. A continuació, es dibuixen dues línies que formen dues cares del triangle.</p> + +<p>{{EmbedLiveSample("Lines", 160, 160, "https://mdn.mozillademos.org/files/238/Canvas_lineTo.png")}}</p> + +<p>Notareu la diferència entre el triangle emplenat i traçat. Això és, com es va esmentar anteriorment, perquè les formes es tanquen automàticament quan s'omple una trajectòria, però no quan es tracen. Si deixem de costat <code>closePath()</code> per al triangle traçat, només s'haurien dibuixat dues línies, no un triangle complet.</p> + +<h3 id="Arcs">Arcs</h3> + +<p>Per dibuixar arcs o cercles, utilitzem els mètodes <code>arc()</code> o <code>arcTo()</code>.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.arc", "arc(x, y, radius, startAngle, endAngle, anticlockwise)")}}</dt> + <dd>Dibuixa un arc que està centrat en la posició (<em>x, y</em>) amb un radi <em>r</em> que comença en <em>startAngle</em> i acaba en <em>endAngle</em> que va en la direcció donada, indicada per el <em>sentit antihorari</em> (predeterminat en <em>sentit horari</em>)</dd> + <dt>{{domxref("CanvasRenderingContext2D.arcTo", "arcTo(x1, y1, x2, y2, radius)")}}</dt> + <dd>Dibuixa un arc amb els punts de control i radi donats, connectats al punt anterior per una línia recta.</dd> +</dl> + +<p>Vegem amb més detall el mètode <code>arc</code>, que pren sis paràmetres: <code>x</code> i <code>y</code> són les coordenades del centre del cercle en el qual s'ha de dibuixar l'arc. <code>radius</code> és autoexplicatiu. Els paràmetres <code>startAngle</code> i <code>endAngle</code> defineixen els punts inicial i final de l'arc en radiants, al llarg de la corba del cercle. Aquests es mesuren des de l'eix x. El paràmetre <code>anticlockwise</code> és un valor booleà, que quan és <code>true</code>, dibuixa l'arc en sentit contrari a les agulles del rellotge; en cas contrari, l'arc es dibuixa en sentit horari.</p> + +<div class="note"> +<p><strong>Nota</strong>: Els angles en la funció <code>arc</code> es mesuren en radiants, no en graus. Per convertir graus a radiants es pot utilitzar la següent expressió Javascript: <code>radians = (Math.PI/180)*graus</code>.</p> +</div> + +<p>El següent exemple és una mica més complex que el que hem vist anteriorment. Dibuixa 12 arcs diferents, tots amb diferents angles i omplerts.</p> + +<p>Els dos <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for">bucles (loops) </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for"><code>for</code></a> són per recórrer les files i columnes dels arcs. Per a cada arc, iniciem una nova trajectòria cridant <code>beginPath()</code>. En el codi, cadascun dels paràmetres de l'arc es troba en una variable per a major claredat, però no necessàriament ho fareu en la vida real.</p> + +<p>Les coordenades <code>x</code> i <code>y</code> han de ser suficientment clares. <code>radius</code> i <code>startAngle</code> són fixes. <code>endAngle</code> comença a 180 graus (mig cercle) en la primera columna i s'incrementa per passos de 90 graus, culminant en un cercle complet en l'última columna</p> + +<p>La instrucció per al paràmetre <code>clockwise</code> (sentit horari), resulti en la primera i la tercera fila que es dibuixin com a arcs en sentit horari i la segona i quarta fila com a arcs en sentit antihorari. Finalment, la sentència <code>if</code> fa que la meitat superior traci els arcs i la meitat inferior ompli els arcs.</p> + +<div class="note"> +<p><strong>Nota:</strong> Aquest exemple requereix un llenç una mica més gran que els altres, en aquesta pàgina: 150 x 200 píxels.</p> +</div> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="200"></canvas> + </body> +</html> +</pre> +</div> + +<pre class="brush: js;highlight[16]">function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + + for (var i = 0; i < 4; i++) { + for (var j = 0; j < 3; j++) { + ctx.beginPath(); + var x = 25 + j * 50; // x coordinate + var y = 25 + i * 50; // y coordinate + var radius = 20; // Arc radius + var startAngle = 0; // Starting point on circle + var endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle + var anticlockwise = i % 2 !== 0; // clockwise or anticlockwise + + ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise); + + if (i > 1) { + ctx.fill(); + } else { + ctx.stroke(); + } + } + } + } +} +</pre> + +<p>{{EmbedLiveSample("Arcs", 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png")}}</p> + +<h3 id="Corbes_bézier_i_quadràtiques">Corbes bézier i quadràtiques</h3> + +<p>El següent tipus de trajectòries disponibles són les <a href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve">corbes de Bézier</a>, disponibles en varietats cúbiques i quadràtiques. Aquests s'utilitzen generalment per dibuixar formes orgàniques complexes.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.quadraticCurveTo", "quadraticCurveTo(cp1x, cp1y, x, y)")}}</dt> + <dd>Dibuixa una corba Bézier quadràtica des de la posició actual del llapis fins al punt final especificat per <code>x</code> i <code>y</code>, utilitzant els punts de control especificats per <code>cp1x</code> i <code>cp1y</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.bezierCurveTo", "bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)")}}</dt> + <dd>Dibuixa una corba Bézier cúbica des de la posició actual del llapis fins al punt final especificat per <code>x</code> i <code>y</code>, utilitzant els punts de control especificats per (<code>cp1x</code>, <code>cp1y</code>) i (cp2x, cp2y).</dd> +</dl> + +<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/223/Canvas_curves.png" style="float: right; height: 190px; width: 190px;">La millor manera de descriure la diferència entre aquestes dues opcions és usant la imatge de la dreta. Una corba Bézier quadràtica té un punt inicial i un punt final (punts blaus) i només un <strong>punt de control</strong> (indicat pel punt vermell), mentre que una corba Bézier cúbica utilitza dos punts de control.</p> + +<p>Els paràmetres <code>x</code> i <code>y</code> de tots dos mètodes són les coordenades del punt final. <code>cp1x</code> i <code>cp1y</code> són les coordenades del primer punt de control, i <code>cp2x</code> i <code>cp2y</code> són les coordenades del segon punt de control.</p> + +<p>L'ús de corbes de Bézier cúbiques i quadràtiques pot ser tot un repte, perquè a diferència del programari de dibuix vectorial com Adobe Illustrator, no tenim respostes visuals directes sobre el que estem fent. Això fa que sigui bastant difícil dibuixar formes complexes. En el següent exemple, dibuixarem algunes formes orgàniques senzilles, però si teniu el temps i, sobretot paciència, es poden crear formes molt més complexes.</p> + +<p>No hi ha res molt difícil en aquests exemples. En tots dos casos veiem una successió de corbes dibuixades que finalment donen com a resultat una forma completa.</p> + +<h4 id="Corbes_de_Bezier_quadràtiques">Corbes de Bezier quadràtiques</h4> + +<p>Aquest exemple usa múltiples corbes de Bézier quadràtiques per representar un globus de diàleg .</p> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> +</div> + +<pre class="brush: js;highlight[9,10,11,12,13,14]">function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + + // Quadratric curves example + ctx.beginPath(); + ctx.moveTo(75, 25); + ctx.quadraticCurveTo(25, 25, 25, 62.5); + ctx.quadraticCurveTo(25, 100, 50, 100); + ctx.quadraticCurveTo(50, 120, 30, 125); + ctx.quadraticCurveTo(60, 120, 65, 100); + ctx.quadraticCurveTo(125, 100, 125, 62.5); + ctx.quadraticCurveTo(125, 25, 75, 25); + ctx.stroke(); + } +} +</pre> + +<p>{{EmbedLiveSample("Quadratic_Bezier_curves", 160, 160, "https://mdn.mozillademos.org/files/243/Canvas_quadratic.png")}}</p> + +<h4 id="Corbes_de_Bezier_cúbiques">Corbes de Bezier cúbiques</h4> + +<p><span id="result_box" lang="ca"><span>Aquest exemple dibuixa un cor utilitzant corbes Bézier cúbiques</span></span>.</p> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> +</div> + +<pre class="brush: js;highlight[9,10,11,12,13,14]">function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + + // Cubic curves example + ctx.beginPath(); + ctx.moveTo(75, 40); + ctx.bezierCurveTo(75, 37, 70, 25, 50, 25); + ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5); + ctx.bezierCurveTo(20, 80, 40, 102, 75, 120); + ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5); + ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25); + ctx.bezierCurveTo(85, 25, 75, 37, 75, 40); + ctx.fill(); + } +} +</pre> + +<p>{{EmbedLiveSample("Cubic_Bezier_curves", 160, 160, "https://mdn.mozillademos.org/files/207/Canvas_bezier.png")}}</p> + +<h3 id="Rectangles">Rectangles</h3> + +<p>A més dels tres mètodes que vam veure en {{anch("Drawing rectangles")}}, que dibuixen formes rectangulars directament al llenç, també està el mètode <code>rect()</code>, que afegeix una trajectòria rectangular a una trajectòria actualment oberta.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.rect", "rect(x, y, width, height)")}}</dt> + <dd>Dibuixa un rectangle a la cantonada superior esquerra especificada per (<code>x</code>, <code>y</code>) amb <code>width</code> i <code>height</code> especificats.</dd> +</dl> + +<p>Quan s'executa aquest mètode, el mètode <code>moveTo()</code> es crida automàticament amb els paràmetres (0,0). En altres paraules, la posició actual del llapis es restableix automàticament a les coordenades predeterminades.</p> + +<h3 id="Fer_combinacions">Fer combinacions</h3> + +<p>Fins ara, cada exemple d'aquesta pàgina només ha utilitzat un tipus de funció de trajectòria per forma. No obstant això, no hi ha limitació en el nombre o tipus de trajectòries que podeu utilitzar per crear una forma. Així, en aquest últim exemple, combinem totes les funcions de trajectòria per crear un conjunt de personatges de joc molt famosos.</p> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> +</div> + +<pre class="brush: js">function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + + roundedRect(ctx, 12, 12, 150, 150, 15); + roundedRect(ctx, 19, 19, 150, 150, 9); + roundedRect(ctx, 53, 53, 49, 33, 10); + roundedRect(ctx, 53, 119, 49, 16, 6); + roundedRect(ctx, 135, 53, 49, 33, 10); + roundedRect(ctx, 135, 119, 25, 49, 10); + + ctx.beginPath(); + ctx.arc(37, 37, 13, Math.PI / 7, -Math.PI / 7, false); + ctx.lineTo(31, 37); + ctx.fill(); + + for (var i = 0; i < 8; i++) { + ctx.fillRect(51 + i * 16, 35, 4, 4); + } + + for (i = 0; i < 6; i++) { + ctx.fillRect(115, 51 + i * 16, 4, 4); + } + + for (i = 0; i < 8; i++) { + ctx.fillRect(51 + i * 16, 99, 4, 4); + } + + ctx.beginPath(); + ctx.moveTo(83, 116); + ctx.lineTo(83, 102); + ctx.bezierCurveTo(83, 94, 89, 88, 97, 88); + ctx.bezierCurveTo(105, 88, 111, 94, 111, 102); + ctx.lineTo(111, 116); + ctx.lineTo(106.333, 111.333); + ctx.lineTo(101.666, 116); + ctx.lineTo(97, 111.333); + ctx.lineTo(92.333, 116); + ctx.lineTo(87.666, 111.333); + ctx.lineTo(83, 116); + ctx.fill(); + + ctx.fillStyle = 'white'; + ctx.beginPath(); + ctx.moveTo(91, 96); + ctx.bezierCurveTo(88, 96, 87, 99, 87, 101); + ctx.bezierCurveTo(87, 103, 88, 106, 91, 106); + ctx.bezierCurveTo(94, 106, 95, 103, 95, 101); + ctx.bezierCurveTo(95, 99, 94, 96, 91, 96); + ctx.moveTo(103, 96); + ctx.bezierCurveTo(100, 96, 99, 99, 99, 101); + ctx.bezierCurveTo(99, 103, 100, 106, 103, 106); + ctx.bezierCurveTo(106, 106, 107, 103, 107, 101); + ctx.bezierCurveTo(107, 99, 106, 96, 103, 96); + ctx.fill(); + + ctx.fillStyle = 'black'; + ctx.beginPath(); + ctx.arc(101, 102, 2, 0, Math.PI * 2, true); + ctx.fill(); + + ctx.beginPath(); + ctx.arc(89, 102, 2, 0, Math.PI * 2, true); + ctx.fill(); + } +} + +// A utility function to draw a rectangle with rounded corners. + +function roundedRect(ctx, x, y, width, height, radius) { + ctx.beginPath(); + ctx.moveTo(x, y + radius); + ctx.lineTo(x, y + height - radius); + ctx.arcTo(x, y + height, x + radius, y + height, radius); + ctx.lineTo(x + width - radius, y + height); + ctx.arcTo(x + width, y + height, x + width, y + height-radius, radius); + ctx.lineTo(x + width, y + radius); + ctx.arcTo(x + width, y, x + width - radius, y, radius); + ctx.lineTo(x + radius, y); + ctx.arcTo(x, y, x, y + radius, radius); + ctx.stroke(); +} +</pre> + +<p><span class="short_text" id="result_box" lang="ca"><span>La imatge resultant és així:</span></span></p> + +<p>{{EmbedLiveSample("Making_combinations", 160, 160, "https://mdn.mozillademos.org/files/9849/combinations.png")}}</p> + +<p>No anem a repassar això detalladament, ja que en realitat és sorprenentment senzill. La cosa més important a destacar és l'ús de la propietat <code>fillStyle</code> en el context del dibuix, i l'ús d'una funció d'utilitat (en aquest cas <code>roundedRect()</code>). L'ús de funcions d'utilitat per als bits del dibuix sovint pot ser molt útil i reduir la quantitat de codi que necessiteu, així com la seva complexitat.</p> + +<p>Tornarem a fer un cop d'ull a <code>fillStyle</code>, en més detall, més endavant en aquest tutorial. Aquí, tot el que fem és usar-ho per canviar el color d'emplenament de les trajectòries del color predeterminat de negre a blanc, i viceversa .</p> + +<h2 id="Objectes_Path2D">Objectes Path2D</h2> + +<p>Com hem vist en l'últim exemple, pot haver-hi una sèrie de trajectories i ordres de dibuix per dibuixar objectes sobre el llenç. Per simplificar el codi i millorar el rendiment, l'objecte {{domxref("Path2D")}} disponible en versions recents dels navegadors, permet emmagatzemar en la memòria cau o gravar aquestes ordres de dibuix. Podeu reproduir les vostres trajectòries ràpidament.<br> + Vegem com podem construir un objecte <code>Path2D</code>:</p> + +<dl> + <dt>{{domxref("Path2D.Path2D", "Path2D()")}}</dt> + <dd>El constructor <code><strong>Path2D()</strong></code> retorna un objecte <code>Path2D</code> recentment instanciat, opcionalment amb una altra trajectòria com a argument (crea una còpia), o opcionalment amb una cadena consistent en dades de <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths">trajectòria SVG</a>.</dd> +</dl> + +<pre class="brush: js">new Path2D(); // empty path object +new Path2D(path); // copy from another Path2D object +new Path2D(d); // path from SVG path data</pre> + +<p>Tots els <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#Paths">mètodes de trajectòria</a> com <code>moveTo</code>, <code>rect</code>, <code>arc</code> o <code>quadraticCurveTo</code>, etc., que hem conegut anteriorment, estan disponibles en els objectes <code>Path2D</code>.</p> + +<p>L'API de <code>Path2D</code> també afegeix una forma de combinar trajectòries utilitzant el mètode <code>addPath</code>. Això pot ser útil quan es desitja construir objectes a partir de diversos components, per exemple.</p> + +<dl> + <dt>{{domxref("Path2D.addPath", "Path2D.addPath(path [, transform])")}}</dt> + <dd>Afegeix una trajectòria a la trajectòria actual amb una matriu de transformació opcional.</dd> +</dl> + +<h3 id="Exemple_de_Path2D">Exemple de Path2D</h3> + +<p>En aquest exemple, estem creant un rectangle i un cercle. Tots dos s'emmagatzemen com un objecte <code>Path2D</code>, de manera que estan disponibles per al seu ús posterior. Amb la nova API <code>Path2D</code>, es van actualitzar diversos mètodes per acceptar opcionalment un objecte <code>Path2D</code> que s'utilitzarà en comptes de la trajectòria actual. Aquí, <code>stroke</code> i <code>fill</code> s'utilitzen amb un argument de trajectòria per dibuixar tots dos objectes sobre el llenç, per exemple.</p> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="130" height="100"></canvas> + </body> +</html> +</pre> +</div> + +<pre class="brush: js;highlight[6,9]">function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + + var rectangle = new Path2D(); + rectangle.rect(10, 10, 50, 50); + + var circle = new Path2D(); + circle.moveTo(125, 35); + circle.arc(100, 35, 25, 0, 2 * Math.PI); + + ctx.stroke(rectangle); + ctx.fill(circle); + } +} +</pre> + +<p>{{EmbedLiveSample("Path2D_example", 130, 110, "https://mdn.mozillademos.org/files/9851/path2d.png")}}</p> + +<h3 id="Ús_de_trajectòries_SVG">Ús de trajectòries SVG</h3> + +<p>Una altra característica poderosa de la nova API <code>Path2D</code> de canvas és l'ús de <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths">dades de trajectòria SVG</a> per inicialitzar trajectòries en el seu llenç. Això podria permetre-li passar les dades de trajectòria i reutilitzar-les tant en SVG com en canvas.</p> + +<p>La trajectòria es mourà al punt (<code>M10 10</code>) i després es mourà horitzontalment 80 punts a la dreta (<code>h 80</code>), després 80 punts cap avall (<code>v 80</code>), després 80 punts a l'esquerra (<code>h -80</code>), i després de tornada al principi (<code>z</code>). Podeu veure aquest exemple a la pàgina <a href="/en-US/docs/Web/API/Path2D.Path2D#Using_SVG_paths">constructor</a> <a href="/en-US/docs/Web/API/Path2D.Path2D#Using_SVG_paths"><code>Path2D</code></a>.</p> + +<pre class="brush: js;">var p = new Path2D('M10 10 h 80 v 80 h -80 Z');</pre> + +<div>{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}</div> diff --git a/files/ca/web/api/canvas_api/tutorial/index.html b/files/ca/web/api/canvas_api/tutorial/index.html new file mode 100644 index 0000000000..92ed58549b --- /dev/null +++ b/files/ca/web/api/canvas_api/tutorial/index.html @@ -0,0 +1,63 @@ +--- +title: Canvas tutorial +slug: Web/API/Canvas_API/Tutorial +tags: + - Canvas + - Graphics + - Guide + - HTML + - HTML5 + - Intermediate + - NeedsTranslation + - TopicStub + - Web +translation_of: Web/API/Canvas_API/Tutorial +--- +<div>{{CanvasSidebar}}</div> + +<div><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas"><img alt="" src="https://mdn.mozillademos.org/files/257/Canvas_tut_examples.jpg" style="float: right; height: 450px; width: 200px;"></a></div> + +<div class="summary"> +<p><a href="/en-US/docs/Web/HTML/Element/canvas" title="HTML/Canvas"><strong><code><canvas></code></strong></a> is an <a href="/en-US/docs/Web/HTML" title="HTML">HTML</a> element which can be used to draw graphics using scripting (usually <a href="/en-US/docs/Glossary/JavaScript" title="JavaScript">JavaScript</a>). This can, for instance, be used to draw graphs, make photo composition or simple (and <a href="/en-US/docs/Web/API/Canvas_API/A_basic_ray-caster" title="A_Basic_RayCaster">not so simple</a>) animations. The images on this page show examples of <a href="/en-US/docs/Web/HTML/Element/canvas" title="HTML/Canvas"><strong><code><canvas></code></strong></a> implementations which will be created in this tutorial.</p> +</div> + +<p><span class="seoSummary">This tutorial describes how to use the <code><canvas></code> element to draw 2D graphics, starting with the basics. The examples provided should give you some clear ideas what you can do with canvas and will provide code snippets that may get you started in building your own content.</span></p> + +<p>First introduced in WebKit by Apple for the OS X Dashboard, <code><canvas></code> has since been implemented in browsers. Today, all major browsers support it.</p> + +<h2 id="Before_you_start" name="Before_you_start">Before you start</h2> + +<p>Using the <code><canvas></code> element is not very difficult, but you do need a basic understanding of <a href="/en-US/docs/Web/HTML" title="HTML">HTML</a> and <a href="/en-US/docs/Web/JavaScript" title="JavaScript">JavaScript</a>. The <code><canvas></code> element is not supported in some older browsers, but is supported in recent versions of all major browsers. The default size of the canvas is 300 px × 150 px (width × height). But custom sizes can be defined using the HTML <code>height</code> and <code>width</code> property. In order to draw graphics on the canvas we use a JavaScript context object, which creates graphics on the fly.</p> + +<h2 id="In_this_tutorial" name="In_this_tutorial">In this tutorial</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage" title="Canvas_tutorial/Basic_usage">Basic usage</a></li> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes" title="Canvas_tutorial/Drawing_shapes">Drawing shapes</a></li> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors" title="Canvas_tutorial/Applying_styles_and_colors">Applying styles and colors</a></li> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text">Drawing text</a></li> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images" title="Canvas_tutorial/Using_images">Using images</a></li> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations" title="Canvas_tutorial/Transformations">Transformations</a></li> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Canvas_tutorial/Compositing">Compositing and clipping</a></li> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations" title="Canvas_tutorial/Basic_animations">Basic animations</a></li> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Advanced_animations">Advanced animations</a></li> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">Pixel manipulation</a></li> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">Hit regions and accessibility</a></li> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas" title="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas">Optimizing the canvas</a></li> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Finale">Finale</a></li> +</ul> + +<h2 id="See_also" name="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Canvas_API" title="HTML/Canvas">Canvas topic page</a></li> + <li><a class="external" href="http://visitmix.com/labs/ai2canvas/" title="http://visitmix.com/labs/ai2canvas/">Adobe Illustrator to Canvas plug-in</a></li> + <li><a class="external" href="http://www.html5canvastutorials.com/" title="http://www.html5canvastutorials.com/">HTML5CanvasTutorials</a></li> + <li><a class="external" href="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/" title="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/">31 days of canvas tutorials</a></li> +</ul> + +<h2 id="A_note_to_contributors">A note to contributors</h2> + +<p>Due to an unfortunate technical error that occurred the week of June 17, 2013, we lost the history of this tutorial, including attributions to all past contributors to its content. We apologize for this, and hope you'll forgive this unfortunate mishap.</p> + +<div>{{ Next("Web/API/Canvas_API/Tutorial/Basic_usage") }}</div> diff --git a/files/ca/web/api/canvas_api/tutorial/manipular_píxels_amb_canvas/index.html b/files/ca/web/api/canvas_api/tutorial/manipular_píxels_amb_canvas/index.html new file mode 100644 index 0000000000..d792e62ef0 --- /dev/null +++ b/files/ca/web/api/canvas_api/tutorial/manipular_píxels_amb_canvas/index.html @@ -0,0 +1,307 @@ +--- +title: Manipular píxels amb canvas +slug: Web/API/Canvas_API/Tutorial/Manipular_píxels_amb_canvas +tags: + - Canvas + - Graphics + - Intermediate + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas +--- +<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Advanced_animations", "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility")}}</div> + +<div class="summary"> +<p>Fins ara no hem mirat els píxels reals del nostre llenç. Amb l'objecte <code>ImageData</code> podem llegir i escriure directament una matriu de dades per manipular dades de píxels. També veurem com es pot controlar el suavitzat de la imatge (anti-aliasing) i com guardar imatges del vostre llenç.</p> +</div> + +<h2 id="Lobjecte_ImageData">L'objecte <code>ImageData</code></h2> + +<p>L'objecte {{domxref("ImageData")}} representa les dades de píxels subjacents d'un àrea d'un objecte canvas. Conté els següents atributs de només lectura:</p> + +<dl> + <dt><code>width</code></dt> + <dd>L'amplada de la imatge en píxels.</dd> + <dt><code>height</code></dt> + <dd>L'alçada de la imatge en píxels.</dd> + <dt><code>data</code></dt> + <dd>Un {{jsxref("Uint8ClampedArray")}} representa una matriu unidimensional que conté les dades en l'ordre RGBA, amb valors enters entre <code>0</code> i <code>255</code> (inclosos).</dd> +</dl> + +<p>La propietat <code>data</code> retorna un {{jsxref("Uint8ClampedArray")}} al que es pot accedir per veure les dades de píxel en brut; cada píxel està representat per quatre valors d'un byte (vermell, verd, blau i alfa, en aquest ordre; és a dir, format "RGBA"). Cada component de color està representat per un nombre enter entre 0 i 255. A cada component se li assigna un índex consecutiu dins de la matriu, el component vermell del píxel esquerre superior és l'índex 0 dins de la matriu. Els píxels es segueixen d'esquerra a dreta, a després cap avall, a través de la matriu.</p> + +<p>El {{jsxref("Uint8ClampedArray")}} conté <code>height</code> × <code>width</code> × 4 bytes de dades, <span id="result_box" lang="ca"><span>amb valors d'índex que van des de 0 fins a</span></span> (<code>height</code>×<code>width</code>×4)-1.</p> + +<p><span id="result_box" lang="ca"><span>Per exemple, per llegir el valor del component blau del píxel a la columna 200, fila 50 de la imatge, fariem el següent:</span></span></p> + +<pre class="brush: js notranslate">blueComponent = imageData.data[((50 * (imageData.width * 4)) + (200 * 4)) + 2];</pre> + +<p>Si se li dóna un conjunt de coordenades (X i Y), es pot acabar fent alguna cosa com això:</p> + +<pre class="brush: js notranslate">var xCoord = 50; +var yCoord = 100; +var canvasWidth = 1024; + +function getColorIndicesForCoord(x, y, width) { + var red = y * (width * 4) + x * 4; + return [red, red + 1, red + 2, red + 3]; +} + +var colorIndices = getColorIndicesForCoord(xCoord, yCoord, canvasWidth); + +var redIndex = colorIndices[0]; +var greenIndex = colorIndices[1]; +var blueIndex = colorIndices[2]; +var alphaIndex = colorIndices[3]; + +var redForCoord = imageData.data[redIndex]; +var greenForCoord = imageData.data[greenIndex]; +var blueForCoord = imageData.data[blueIndex]; +var alphaForCoord = imageData.data[alphaIndex]; +</pre> + +<p>O, si ES6 is apropiat:</p> + +<pre class="brush: js notranslate">const xCoord = 50; +const yCoord = 100; +const canvasWidth = 1024; + +const getColorIndicesForCoord = (x, y, width) => { + const red = y * (width * 4) + x * 4; + return [red, red + 1, red + 2, red + 3]; +}; + +const colorIndices = getColorIndicesForCoord(xCoord, yCoord, canvasWidth); + +const [redIndex, greenIndex, blueIndex, alphaIndex] = colorIndices; +</pre> + +<p><span lang="ca"><span>També es pot accedir a la mida de la matriu de píxels en bytes llegint l'atribut </span></span><code>Uint8ClampedArray.length</code>:</p> + +<pre class="brush: js notranslate">var numBytes = imageData.data.length; +</pre> + +<h2 id="Crear_un_objecte_ImageData">Crear un objecte <code>ImageData</code></h2> + +<p>Per crear un nou objecte <code>ImageData</code> en blanc, hem d'utilitzar el mètode {{domxref("CanvasRenderingContext2D.createImageData", "createImageData()")}}. Hi ha dues versions del mètode <code>createImageData()</code>:</p> + +<pre class="brush: js notranslate">var myImageData = ctx.createImageData(width, height);</pre> + +<p>Crea un nou objecte <code>ImageData</code> amb les dimensions especificades. Tots els píxels estan predefinits en negre transparent.</p> + +<p>També podem crear un nou objecte <code>ImageData</code> amb les mateixes dimensions que l'objecte especificat amb <code>anotherImageData</code>. Els píxels del nou objecte, estan tots predefinits en negre transparent. <strong>Això no copia les dades de la imatge!</strong></p> + +<pre class="brush: js notranslate">var myImageData = ctx.createImageData(anotherImageData);</pre> + +<h2 id="Obtenir_les_dades_de_píxels_per_a_un_context">Obtenir les dades de píxels per a un context</h2> + +<p>Per obtenir un objecte <code>ImageData</code> que contingui una còpia de les dades de píxel per a un context de llenç, podem utilitzar el mètode<code>getImageData()</code>:</p> + +<pre class="brush: js notranslate">var myImageData = ctx.getImageData(left, top, width, height);</pre> + +<p>Aquest mètode retorna un objecte <code>ImageData</code> que representa les dades de píxel per a l'àrea del llenç, les cantonades del qual estan representades pels punts (<code>left</code>,<code>top</code>), (<code>left+width</code>, <code>top</code>), (<code>left</code>, <code>top+height</code>) i (<code>left+width</code>, <code>top+height</code>). Les coordenades s'especifiquen en unitats d'espai en coordenades canvas.</p> + +<div class="note"> +<p><strong>Nota</strong>: Qualsevol píxel fora del llenç es retorna com a negre transparent en l'objecte <code>ImageData</code> resultant.</p> +</div> + +<p>Aquest mètode també es demostra a l'article <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">Manipulant vídeo usant canvas</a>.</p> + +<h3 id="Un_selector_de_colors">Un selector de colors</h3> + +<p>En aquest exemple estem usant el mètode <a href="/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData">getImageData() </a>per mostrar el color sota el cursor del ratolí. Per a això, necessitem la posició actual del ratolí amb <code>layerX</code> i <code>layerY</code>, llavors busquem les dades de píxels en aquesta posició en la matriu de píxels que <a href="/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData">getImageData()</a> ens proporciona. Finalment, utilitzem les dades de la matriu per establir un color de fons i un text en el <code><div></code> per mostrar el color.</p> + +<div class="hidden"> +<pre class="brush: html; notranslate"><canvas id="canvas" width="300" height="227" style="float:left"></canvas> +<div id="color" style="width:200px;height:50px;float:left"></div> +</pre> +</div> + +<pre class="brush: js; notranslate">var img = new Image(); +img.crossOrigin = 'anonymous'; +img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg'; +var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +img.onload = function() { + ctx.drawImage(img, 0, 0); + img.style.display = 'none'; +}; +var color = document.getElementById('color'); +function pick(event) { + var x = event.layerX; + var y = event.layerY; + var pixel = ctx.getImageData(x, y, 1, 1); + var data = pixel.data; + var rgba = 'rgba(' + data[0] + ', ' + data[1] + + ', ' + data[2] + ', ' + (data[3] / 255) + ')'; + color.style.background = rgba; + color.textContent = rgba; +} +canvas.addEventListener('mousemove', pick); +</pre> + +<p>{{ EmbedLiveSample('A_color_picker', 610, 240) }}</p> + +<h2 id="Pintar_dades_de_píxels_en_un_context">Pintar dades de píxels en un context</h2> + +<p>Utilitzem el mètode<a href="/en-US/docs/Web/API/CanvasRenderingContext2D/putImageData"> putImageData() </a>per pintar dades de píxels en un context:</p> + +<pre class="brush: js notranslate">ctx.putImageData(myImageData, dx, dy); +</pre> + +<p>Els paràmetres <code>dx</code> i <code>dy</code> indiquen les coordenades del dispositiu, dins del context en el que es pinta la cantonada superior esquerra de les dades de píxels que es vol dibuixar.</p> + +<p>Per exemple, per pintar tota la imatge representada per <code>myImageData</code> en la cantonada superior esquerra del context, simplement fem el següent:</p> + +<pre class="brush: js notranslate">ctx.putImageData(myImageData, 0, 0); +</pre> + +<h3 id="Escalat_de_grisos_i_inversió_de_colors">Escalat de grisos i inversió de colors</h3> + +<p>En aquest exemple, iterem sobre tots els píxels per canviar els seus valors, després posem la matriu de píxels modificada, de nou, al llenç, utilitzant <a href="/en-US/docs/Web/API/CanvasRenderingContext2D/putImageData">putImageData()</a>. La funció <em>invert</em>, simplement, resta cada color del valor màxim 255. La funció <em>grayscale</em>, simplement, utilitza la mitjana de vermell, verd i blau. També es pot utilitzar una mitjana ponderada, donada per la fórmula <code>x = 0.299r + 0.587g + 0.114b</code>, per exemple. Vegeu <a href="http://en.wikipedia.org/wiki/Grayscale">Escala de grisos (Grayscale)</a> a Wikipedia per obtenir més informació.</p> + +<div class="hidden"> +<pre class="brush: html; notranslate"><canvas id="canvas" width="300" height="227"></canvas> +<div> + <input id="grayscalebtn" value="Grayscale" type="button"> + <input id="invertbtn" value="Invert" type="button"> +</div> +</pre> +</div> + +<pre class="brush: js notranslate">var img = new Image(); +img.crossOrigin = 'anonymous'; +img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg'; +img.onload = function() { + draw(this); +}; + +function draw(img) { + var canvas = document.getElementById('canvas'); + var ctx = canvas.getContext('2d'); + ctx.drawImage(img, 0, 0); + img.style.display = 'none'; + var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); + var data = imageData.data; + + var invert = function() { + for (var i = 0; i < data.length; i += 4) { + data[i] = 255 - data[i]; // red + data[i + 1] = 255 - data[i + 1]; // green + data[i + 2] = 255 - data[i + 2]; // blue + } + ctx.putImageData(imageData, 0, 0); + }; + + var grayscale = function() { + for (var i = 0; i < data.length; i += 4) { + var avg = (data[i] + data[i + 1] + data[i + 2]) / 3; + data[i] = avg; // red + data[i + 1] = avg; // green + data[i + 2] = avg; // blue + } + ctx.putImageData(imageData, 0, 0); + }; + + var invertbtn = document.getElementById('invertbtn'); + invertbtn.addEventListener('click', invert); + var grayscalebtn = document.getElementById('grayscalebtn'); + grayscalebtn.addEventListener('click', grayscale); +} +</pre> + +<p>{{ EmbedLiveSample('Grayscaling_and_inverting_colors', 330, 270) }}</p> + +<h2 id="Ampliació_i_suavitzat">Ampliació i suavitzat</h2> + +<p>Amb l'ajuda del mètode {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} un segon llenç i la propietat {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}}, podem ampliar la nostra imatge i veure els detalls.</p> + +<p>Obtenim la posició del ratolí, retallem una imatge de 5 píxels a l'esquerra i a dalt a 5 píxels a la dreta i a baix. A continuació, la copiem a un altre llenç i canviem la grandària de la imatge a la grandària que volguem. En el llenç de zoom, canviem la grandària de un retall de 10×10 píxels del llenç original a 200×200.</p> + +<pre class="brush: js notranslate">zoomctx.drawImage(canvas, + Math.abs(x - 5), Math.abs(y - 5), + 10, 10, 0, 0, 200, 200);</pre> + +<p>Atès que el suavitzat (anti-aliasing) està habilitat per defecte, és possible que vulguem deshabilitar el suavitzat per veure els píxels clars. Alternant la casella de verificació es pot veure l'efecte de la propietat <code>imageSmoothingEnabled</code> (necessita prefixos per a diferents navegadors).</p> + +<h6 class="hidden" id="Zoom_example">Zoom example</h6> + +<div class="hidden"> +<pre class="brush: html; notranslate"><canvas id="canvas" width="300" height="227"></canvas> +<canvas id="zoom" width="300" height="227"></canvas> +<div> +<label for="smoothbtn"> + <input type="checkbox" name="smoothbtn" checked="checked" id="smoothbtn"> + Enable image smoothing +</label> +</div> +</pre> +</div> + +<pre class="brush: js notranslate">var img = new Image(); +img.crossOrigin = 'anonymous'; +img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg'; +img.onload = function() { + draw(this); +}; + +function draw(img) { + var canvas = document.getElementById('canvas'); + var ctx = canvas.getContext('2d'); + ctx.drawImage(img, 0, 0); + img.style.display = 'none'; + var zoomctx = document.getElementById('zoom').getContext('2d'); + + var smoothbtn = document.getElementById('smoothbtn'); + var toggleSmoothing = function(event) { + zoomctx.imageSmoothingEnabled = this.checked; + zoomctx.mozImageSmoothingEnabled = this.checked; + zoomctx.webkitImageSmoothingEnabled = this.checked; + zoomctx.msImageSmoothingEnabled = this.checked; + }; + smoothbtn.addEventListener('change', toggleSmoothing); + + var zoom = function(event) { + var x = event.layerX; + var y = event.layerY; + zoomctx.drawImage(canvas, + Math.abs(x - 5), + Math.abs(y - 5), + 10, 10, + 0, 0, + 200, 200); + }; + + canvas.addEventListener('mousemove', zoom); +}</pre> + +<p>{{ EmbedLiveSample('Zoom_example', 620, 490) }}</p> + +<h2 id="Guardar_imatges">Guardar imatges</h2> + +<p>El {{domxref("HTMLCanvasElement")}} proporciona un mètode <code>toDataURL()</code>, que és útil quan es guarden imatges. Retorna un <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/data_URIs">URI de dades</a> que conté una representació de la imatge en el format especificat pel paràmetre <code>type</code> (per defecte en <a class="external external-icon" href="https://en.wikipedia.org/wiki/Portable_Network_Graphics">PNG</a>). La imatge retornada té una resolució de 96 dpi.</p> + +<dl> + <dt>{{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/png')")}}</dt> + <dd>Configuració per defecte. Crea una imatge PNG.</dd> + <dt>{{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/jpeg', quality)")}}</dt> + <dd>Crea una imatge JPG. Opcionalment, pot proporcionar una qualitat en el rang de 0 a 1, sent una d'elles la millor qualitat i amb 0 gairebé no recognoscible, però, petita en grandària d'arxiu.</dd> +</dl> + +<p>Una vegada que s'hagi generat un URI de dades des del llenç, es podrà utilitzar com a font de qualsevol {{HTMLElement("image")}} o posar-ho en un hipervíncle amb un <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download">atribut de descàrrega</a> per guardar-ho en el disc, per exemple.</p> + +<p>També es pot crear un {{domxref("Blob")}} des del llenç.</p> + +<dl> + <dt>{{domxref("HTMLCanvasElement.toBlob", "canvas.toBlob(callback, type, encoderOptions)")}}</dt> + <dd>Crea un objecte <code>Blob,</code> representant la imatge continguda en el llenç.</dd> +</dl> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li>{{domxref("ImageData")}}</li> + <li><a href="/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">Manipular vídeo usant canvas</a></li> + <li><a href="https://codepo8.github.io/canvas-images-and-pixels/">Canvas, imatges i pixels – per Christian Heilmann</a></li> +</ul> + +<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Advanced_animations", "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility")}}</p> diff --git a/files/ca/web/api/canvas_api/tutorial/transformacions/index.html b/files/ca/web/api/canvas_api/tutorial/transformacions/index.html new file mode 100644 index 0000000000..2958d40498 --- /dev/null +++ b/files/ca/web/api/canvas_api/tutorial/transformacions/index.html @@ -0,0 +1,290 @@ +--- +title: Transformacions +slug: Web/API/Canvas_API/Tutorial/Transformacions +tags: + - Canvas + - Graphics + - Guide + - HTML + - HTML5 + - Intermediate + - Web +translation_of: Web/API/Canvas_API/Tutorial/Transformations +--- +<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Using_images", "Web/API/Canvas_API/Tutorial/Compositing")}}</div> + +<div class="summary">Anteriorment en aquest tutorial hem après sobre la graella de canvas i l'<strong>espai de coordenades</strong>. Fins ara, només usàvem la graella per defecte i canviàvem la grandària del llenç per a les nostres necessitats. Amb les transformacions, hi ha formes més poderoses de traslladar l'origen a una posició diferent, girar la graella i fins i tot escalar-la.</div> + +<h2 id="Saving_and_restoring_state" name="Saving_and_restoring_state">Guardar i restaurar l'estat</h2> + +<p>Abans de veure els mètodes de transformació, vegem altres dos mètodes que són indispensables una vegada que comencem a generar dibuixos cada vegada més complexos.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.save", "save()")}}</dt> + <dd>Guarda tot l'estat del llenç.</dd> + <dt>{{domxref("CanvasRenderingContext2D.restore", "restore()")}}</dt> + <dd>Restaura l'estat del llenç guardat més recent.</dd> +</dl> + +<p>Els estats del llenç s'emmagatzemen en una pila. Cada vegada que es crida al mètode <code>save()</code> l'estat del dibuix actual es mou a la pila. L'estat d'un dibuix consisteix de</p> + +<ul> + <li>Les transformacions que s'han aplicat (i.e. <code>translate</code>, <code>rotate</code> i <code>scale</code> – vegeu a continuació).</li> + <li>Els valors actuals dels següents atributs: {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}, {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}, {{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha")}}, {{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth")}}, {{domxref("CanvasRenderingContext2D.lineCap", "lineCap")}}, {{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin")}}, {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}, {{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}}, {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}, {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}}, {{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation")}}, {{domxref("CanvasRenderingContext2D.font", "font")}}, {{domxref("CanvasRenderingContext2D.textAlign", "textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline")}}, {{domxref("CanvasRenderingContext2D.direction", "direction")}}, {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}}.</li> + <li>La <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing#Clipping_paths">trajectòria de retall</a> actual, que veurem a la següent secció.</li> +</ul> + +<p>Es pot cridar al mètode <code>save()</code> tantes vegades com es vulgui. Cada vegada que es crida al mètode <code>restore()</code> l'últim estat desat s'elimina de la pila i es restauren tots les configuracions guardades.</p> + +<h3 id="A_save_and_restore_canvas_state_example" name="A_save_and_restore_canvas_state_example">Un exemple de <code>save</code> i <code>restore</code> de l'estat del llenç</h3> + +<p>Aquest exemple intenta il·lustrar com funciona la pila d'estats del dibuix en dibuixar un conjunt de rectangles consecutius.</p> + +<pre class="brush: js; highlight:[5,10,15,18]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + ctx.fillRect(0, 0, 150, 150); // Dibuixa un rectangle amb la configuració per defecte + ctx.save(); // Guarda el estat predeterminat + + ctx.fillStyle = '#09F'; // Es fan canvis a la configuració + ctx.fillRect(15, 15, 120, 120); // Es dibuixa un rectangle amb la nova configuració + + ctx.save(); // Es guarda el estat actual + ctx.fillStyle = '#FFF'; // Es fan canvis a la configuració + ctx.globalAlpha = 0.5; + ctx.fillRect(30, 30, 90, 90); // Es dibuixa un rectangle amb la nova configuració + + ctx.restore(); // Es restaura el estat anterior + ctx.fillRect(45, 45, 60, 60); // Es dibuixa un rectangle amb la configuració restaurada + + ctx.restore(); // Es restaura el estat original + ctx.fillRect(60, 60, 30, 30); // Es dibuixa un rectangle amb la configuració restaurada</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>El primer pas és dibuixar un gran rectangle amb la configuració predeterminada. A continuació guardem aquest estat i fem canvis en el color de farcit. Després dibuixem el segon rectangle blau i més petit i guardem l'estat. De nou canviem algunes configuracions de dibuix i dibuixem el tercer rectangle blanc semitransparent.</p> + +<p>Fins ara, això és bastant similar al que hem fet en les seccions anteriors. No obstant això, una vegada que cridem a la primera instrucció <code>restore()</code> l'estat del dibuix superior s'elimina de la pila i es restaura la configuració. Si no haguéssim guardat l'estat usant <code>save()</code>, hauríem de canviar el color de farcit i la transparència manualment, per tornar a l'estat anterior. Això seria fàcil per a dues propietats, però si tenim més que això, el nostre codi es faria molt llarg, molt ràpid.</p> + +<p>Quan es crida a la segona instrucció <code>restore()</code>, es restaura l'estat original (el que hem configurat abans de la primera crida <code>save</code>) i l'últim rectangle es dibuixa de nou en negre.</p> + +<p>{{EmbedLiveSample("A_save_and_restore_canvas_state_example", "180", "180", "https://mdn.mozillademos.org/files/249/Canvas_savestate.png")}}</p> + +<h2 id="Translating" name="Translating">Traslladar</h2> + +<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/234/Canvas_grid_translate.png" style="float: right;">El primer dels mètodes de transformació que veurem és <code>translate()</code>. Aquest mètode s'utilitza per moure el llenç i el seu origen a un punt diferent de la graella.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.translate", "translate(x, y)")}}</dt> + <dd>Mou el llenç i el seu origen en la graella. <code>x</code> indica la distància horitzontal a moure, i <code>y</code> indica quanta distància s'ha de moure la graella verticalment.</dd> +</dl> + +<p>És una bona idea guardar l'estat del llenç abans de fer qualsevol transformació. En la majoria dels casos, és més fàcil cridar al mètode <code>restore</code>, que haver de fer una traslació inversa per tornar a l'estat original. També, si estem trasladant dins d'un bucle i no guardem i restaurem l'estat del llenç, pot ser que acabem perdent part del dibuix, ja que es va dibuixar fora de la vora del llenç.</p> + +<h3 id="A_translate_example" name="A_translate_example">Un exemple de <code>translate</code></h3> + +<p>Aquest exemple demostra alguns dels beneficis de traslladar l'origen del llenç. Sense el mètode <code>translate()</code>, tots els rectangles es dibuixarien en la mateixa posició (0,0). El mètode <code>translate()</code>, també ens dóna la llibertat de col·locar el rectangle en qualsevol lloc del llenç, sense haver d'ajustar manualment les coordenades en la funció <code>fillRect()</code>. Això fa que sigui una mica més fàcil d'entendre i usar.</p> + +<p>En la funció <code>draw()</code>, cridem a la funció <code>fillRect()</code> nou vegades, usant dos bucles <code>for</code>. En cada bucle, el llenç es trasllada, es dibuixa el rectangle i el llenç torna al seu estat original. Observem com la crida a <code>fillRect()</code> usa les mateixes coordenades cada vegada, confiant en <code>translate()</code> per ajustar la posició del dibuix.</p> + +<pre class="brush: js; highlight:[7]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + for (var i = 0; i < 3; i++) { + for (var j = 0; j < 3; j++) { + ctx.save(); + ctx.fillStyle = 'rgb(' + (51 * i) + ', ' + (255 - 51 * i) + ', 255)'; + ctx.translate(10 + j * 50, 10 + i * 50); + ctx.fillRect(0, 0, 25, 25); + ctx.restore(); + } + } +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>{{EmbedLiveSample("A_translate_example", "160", "160", "https://mdn.mozillademos.org/files/9857/translate.png")}}</p> + +<h2 id="Rotating" name="Rotating">Girar</h2> + +<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/233/Canvas_grid_rotate.png" style="float: right;">El segon mètode de transformació és <code>rotate()</code>. Se usa per girar el llenç al voltant de l'origen actual.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.rotate", "rotate(angle)")}}</dt> + <dd>Gira el llenç en sentit horari, al voltant de l'origen actual pel nombre d'<code>angle</code> de radiants.</dd> +</dl> + +<p>El punt central de gir és sempre l'origen del llenç. Per canviar el punt central, necessitarem moure el llenç usant el mètode <code>translate()</code>.</p> + +<h3 id="A_rotate_example" name="A_rotate_example">Un exemple de <code>rotate</code></h3> + +<p>En aquest exemple, usarem el mètode <code>rotate()</code> para girar primer un rectangle des de l'origen del llenç, i després des del centre del rectangle mateix amb l'ajuda de <code>translate()</code>.</p> + +<div class="note"> +<p><strong>Recordatori</strong>: Els angles estan en radiants, no en graus. Per fer la conversació, estem usant: <code>radians = (Math.PI/180)*degrees</code>.</p> +</div> + +<pre class="brush: js; highlight:[9, 23]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + // <span class="s3gt_translate_tooltip_variant" id="s3gt_translate_tooltip_variant_to_id_0">rectangles esquerra, giren a partir d'origen del llenç</span> + ctx.save(); + // rect blau + ctx.fillStyle = '#0095DD'; + ctx.fillRect(30, 30, 100, 100); + ctx.rotate((Math.PI / 180) * 25); + // grey rect + ctx.fillStyle = '#4D4E53'; + ctx.fillRect(30, 30, 100, 100); + ctx.restore(); + + // <span class="s3gt_translate_tooltip_variant" id="s3gt_translate_tooltip_variant_to_id_0">rectangles drets, giren des del centre del rectangle</span> + // dibuixa rect blau + ctx.fillStyle = '#0095DD'; + ctx.fillRect(150, 30, 100, 100); + + ctx.translate(200, 80); // trasllada al rectangle central + // x = x + 0.5 * width + // y = y + 0.5 * height + ctx.rotate((Math.PI / 180) * 25); // gira + ctx.translate(-200, -80); // traslladar de nou + + // dibuixa rect gris + ctx.fillStyle = '#4D4E53'; + ctx.fillRect(150, 30, 100, 100); +} +</pre> + +<p>Per girar el rectangle al voltant del seu propi centre, traslladem el llenç al centre del rectangle, després girem el llenç i tornem a traslladar el llenç a 0,0, i a continuació dibuixem el rectangle.</p> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="300" height="200"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>{{EmbedLiveSample("A_rotate_example", "310", "210", "https://mdn.mozillademos.org/files/9859/rotate.png")}}</p> + +<h2 id="Scaling" name="Scaling">Escalar</h2> + +<p>El següent mètode de transformació és l'escalat. Ho usem per augmentar o disminuir les unitats en la graella del llenç. Això es pot utilitzar per dibuixar formes i mapes de bits reduïts o ampliats.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.scale", "scale(x, y)")}}</dt> + <dd>Escala les unitats del llenç, per x horitzontalment i per y verticalment. Tots dos paràmetres són nombres reals. Els valors inferiors a 1.0 redueixen la grandària de la unitat i els valors superiors a 1.0 augmenten la grandària de la unitat. Els valors a 1.0 deixen les unitats de la mateixa grandària.</dd> +</dl> + +<p>Usant nombres negatius es pot fer la replica d'eixos (per exemple, usant <code>translate(0,canvas.height); scale(1,-1);</code> tindrem el conegut sistema de coordenades cartesianes, amb l'origen en la cantonada inferior esquerra).</p> + +<p>Per defecte, una unitat en el llenç és exactament un píxel. Si apliquem, per exemple, un factor d'escala de 0.5, la unitat resultant es convertirà en 0.5 píxels i per tant les formes es dibuixaran a meitat de la seva grandària. De manera similar, si s'ajusta el factor d'escala a 2.0, la grandària de la unitat augmentarà i una unitat ara es converteix en dos píxels. Això dona com a resultat que les formes es dibuixin dues vegades més grans.</p> + +<h3 id="A_scale_example" name="A_scale_example">Un exemple de <code>scale</code></h3> + +<p><span class="s3gt_translate_tooltip_variant" id="s3gt_translate_tooltip_variant_to_id_0">En aquest últim exemple, dibuixarem formes amb diferents factors d'escala.</span></p> + +<pre class="brush: js; highlight:[6,11]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + // <span class="short_text" id="result_box" lang="ca"><span>dibuixar un rectangle senzill, però escalar-lo</span></span>. + ctx.save(); + ctx.scale(10, 3); + ctx.fillRect(1, 10, 10, 10); + ctx.restore(); + + // mirror horizontally + ctx.scale(-1, 1); + ctx.font = '48px serif'; + ctx.fillText('MDN', -135, 120); +} + +</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>{{EmbedLiveSample("A_scale_example", "160", "160", "https://mdn.mozillademos.org/files/9861/scale.png")}}</p> + +<h2 id="Transforms" name="Transforms">Transformar</h2> + +<p>Finalment, els següents mètodes de transformació permeten modificar directament la matriu de transformació.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.transform", "transform(a, b, c, d, e, f)")}}</dt> + <dd>Multiplica la matriu de transformació actual amb la matriu descrita pels seus arguments. La matriu de transformació és descrita per: <math><semantics><mrow><mo>[</mo><mtable columnalign="center center center" rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right]</annotation></semantics></math></dd> +</dl> + +<dl> + <dd>Si qualsevol dels arguments és <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code>, la matriu de transformació ha de ser marcada com a infinita en lloc que el mètode llanci una excepció.</dd> +</dl> + +<p>Els paràmetres d'aquesta funció són:</p> + +<dl> + <dt><code>a (m11)</code></dt> + <dd>Escalat horitzontal.</dd> + <dt><em><code>b (m12)</code></em></dt> + <dd>Desviació Horizontal.</dd> + <dt><code>c (m21)</code></dt> + <dd>Desviació Vertical.</dd> + <dt><code>d (m22)</code></dt> + <dd>Escalat Vertical.</dd> + <dt><code>e (dx)</code></dt> + <dd>Moviment Horizontal.</dd> + <dt><code>f (dy)</code></dt> + <dd>Moviment Vertical.</dd> + <dt>{{domxref("CanvasRenderingContext2D.setTransform", "setTransform(a, b, c, d, e, f)")}}</dt> + <dd>Reinicia la transformació actual a la matriu d'identitat i, a continuació, invoca el mètode <code>transform()</code> amb els mateixos arguments. Això, bàsicament, desfà la transformació actual, i després estableix la transformació especificada, tot en un sol pas.</dd> + <dt>{{domxref("CanvasRenderingContext2D.resetTransform", "resetTransform()")}}</dt> + <dd>Reinicia la transformació actual a la matriu d'identitat. Això és el mateix que cridar: <code>ctx.setTransform(1, 0, 0, 1, 0, 0);</code></dd> +</dl> + +<h3 id="Exemple_de_transform_i_setTransform">Exemple de <code>transform</code> i <code>setTransform</code></h3> + +<pre class="brush: js; highlight:[12,15]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + var sin = Math.sin(Math.PI / 6); + var cos = Math.cos(Math.PI / 6); + ctx.translate(100, 100); + var c = 0; + for (var i = 0; i <= 12; i++) { + c = Math.floor(255 / 12 * i); + ctx.fillStyle = 'rgb(' + c + ', ' + c + ', ' + c + ')'; + ctx.fillRect(0, 0, 100, 10); + ctx.transform(cos, sin, -sin, cos, 0, 0); + } + + ctx.setTransform(-1, 0, 0, 1, 100, 100); + ctx.fillStyle = 'rgba(255, 128, 255, 0.5)'; + ctx.fillRect(0, 50, 100, 100); +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="200" height="250"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>{{EmbedLiveSample("Example_for_transform_and_setTransform", "230", "280", "https://mdn.mozillademos.org/files/255/Canvas_transform.png")}}</p> + +<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Using_images", "Web/API/Canvas_API/Tutorial/Compositing")}}</p> + +<div class="s3gt_translate_tooltip_mini_box" id="s3gt_translate_tooltip_mini" style="position: absolute; left: 224px; top: 1401px; opacity: 0;"> +<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_logo" title="Traducir texto seleccionado"> </div> + +<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_sound" title="Reproducir"> </div> + +<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_copy" title="Copy text to Clipboard"> </div> +</div> diff --git a/files/ca/web/api/canvas_api/tutorial/using_images/index.html b/files/ca/web/api/canvas_api/tutorial/using_images/index.html new file mode 100644 index 0000000000..6d568024ee --- /dev/null +++ b/files/ca/web/api/canvas_api/tutorial/using_images/index.html @@ -0,0 +1,339 @@ +--- +title: Usar imatges +slug: Web/API/Canvas_API/Tutorial/Using_images +tags: + - Advanced + - Canvas + - Graphics + - HTML + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Using_images +--- +<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations" )}}</div> + +<div class="summary"> +<p>Fins ara hem creat les nostres pròpies <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes">formes</a> i <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">aplicat estils</a> a elles. Una de les característiques més interessants de {{HTMLElement("canvas")}} és la capacitat d'usar imatges. Aquestes poden ser usades per fer composicions fotogràfiques dinàmiques o com a telons de fons de gràfics, per sprites en jocs, etcètera. Les imatges externes es poden utilitzar en qualsevol format compatible amb el navegador, com PNG, GIF o JPEG. Fins i tot es pot utilitzar la imatge produïda per altres elements de canvas a la mateixa pàgina que la font!</p> +</div> + +<p> Importar imatges en un llenç és bàsicament un procés de dos passos:</p> + +<ol> + <li>Obtenir una referència a un objecte {{domxref("HTMLImageElement")}} o a un altre element de canvas com a font. També és possible utilitzar imatges proporcionant una URL.</li> + <li>Dibuixi la imatge en el llenç usant la funció <code>drawImage()</code>.</li> +</ol> + +<p>Feu un cop d'ull a com fer això.</p> + +<h2 id="Obtenir_imatges_per_dibuixar">Obtenir imatges per dibuixar</h2> + +<p>L'API de canvas pot utilitzar qualsevol dels següents tipus de dades com a font d'imatge:</p> + +<dl> + <dt>{{domxref("HTMLImageElement")}}</dt> + <dd>Aquestes són imatges creades usant el constructor <code>Image()</code>, així com qualsevol element {{HTMLElement("img")}}.</dd> + <dt>{{domxref("SVGImageElement")}}</dt> + <dd>Aquestes són imatges incrustades usant l'element {{SVGElement("image")}}.</dd> + <dt>{{domxref("HTMLVideoElement")}}</dt> + <dd>L'ús d'un element HTML {{HTMLElement("video")}} com a font d'imatge, pren el marc actual del vídeo i ho utilitza com a imatge.</dd> + <dt>{{domxref("HTMLCanvasElement")}}</dt> + <dd>Es pot utilitzar un altre element {{HTMLElement("canvas")}} com la seva font d'imatge</dd> +</dl> + +<p>Aquestes fonts es refereixen col·lectivament pel tipus {{domxref("CanvasImageSource")}}.</p> + +<p>Hi ha diverses maneres d'obtenir imatges per usar-les en un llenç.</p> + +<h3 id="Usar_imatges_de_la_mateixa_pàgina">Usar imatges de la mateixa pàgina</h3> + +<p>Es pot obtenir una referència a les imatges en la mateixa pàgina que el llenç utilitzant una de les següents opcions:</p> + +<ul> + <li>La col·lecció {{domxref("document.images")}}.</li> + <li>El mètode {{domxref("document.getElementsByTagName()")}}.</li> + <li>Si es coneix l'ID de la imatge específica que es desitja utilitzar, es pot usar {{domxref("document.getElementById()")}} per recuperar aquesta imatge específica.</li> +</ul> + +<h3 id="Usar_imatges_d'altres_dominis">Usar imatges d'altres dominis</h3> + +<p>Usant l'atribut {{htmlattrxref("crossorigin", "img")}} d'un element {{HTMLElement("img")}} (reflectit per la propietat {{domxref("HTMLImageElement.crossOrigin")}} property), es pot sol·licitar permís per carregar una imatge d'un altre domini per usar-la cridant a <code>drawImage()</code>. Si el domini d'allotjament permet l'accés de domini creuat a la imatge, la imatge es pot utilitzar en el llenç sense corrompre's; en cas contrari, usar la imatge <a href="https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F">corromprà el llenç</a>.</p> + +<h3 id="Usar_altres_elements_de_canvas">Usar altres elements de canvas</h3> + +<p>Igual que amb les imatges normals, accedim a altres elements de canvas usant el mètode {{domxref("document.getElementsByTagName()")}} o {{domxref("document.getElementById()")}}. Hem d'estar segurs d'haver dibuixat alguna cosa en el llenç font abans d'usar-ho en el llenç de destinació.</p> + +<p>Un dels usos més pràctics d'això seria usar un segon element de canvas com a vista en miniatura de l'altre canvas més gran.</p> + +<h3 id="Crear_una_imatge_des_de_zero">Crear una imatge des de zero</h3> + +<p>Una altra opció és crear nous {{domxref("HTMLImageElement")}} en un script. Per fer-ho, hem d'utilitzar el constructor adequat <code>Image()</code>:</p> + +<pre class="brush: js">var img = new Image(); // Create new img element +img.src = 'myImage.png'; // Set source path +</pre> + +<p>Quan s'executa aquest script, la imatge comença a carregar-se.</p> + +<p>Si intentem cridar <code>drawImage()</code> abans que la imatge s'hagi acabat de carregar, no farà res (o, en navegadors antics, fins i tot pot arribar a produir una excepció). Per tant, ens hem d'assegurar d'utilitzar l'esdeveniment <em>load</em> per no intentar-ho abans de que la imatge es carregui:</p> + +<pre class="brush: js">var img = new Image(); // Create new img element +img.addEventListener('load', function() { + // execute drawImage statements here +}, false); +img.src = 'myImage.png'; // Set source path +</pre> + +<p>Si només s'utilitza una imatge externa, això pot ser un bon enfocament, però una vegada que es necessiti rastrejar més d'una, es necessitarà recórrer a una mica més intel·ligent. Està fora de l'abast d'aquest tutorial examinar tàctiques de precàrrega d'imatges, però cal tenir-ho en ment.</p> + +<h3 id="Incrustar_una_imatge_mitjançant_dades_URL">Incrustar una imatge mitjançant dades: URL</h3> + +<p>Una altra forma possible d'incloure imatges és a través de les <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/data_URIs">dades: url</a>. Les URLs de dades permeten definir completament una imatge com una cadena de caràcters codificats en Base64, directament en el codi.</p> + +<pre class="brush: js">var img = new Image(); // Create new img element +img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw=='; +</pre> + +<p>Un avantatge de les URL de dades és que la imatge resultant està disponible immediatament sense un altre viatge d'anada i tornada al servidor. Un altre avantatge potencial és que també és possible encapsular en un sol arxiu tots els nostres arxius <a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a>, <a href="/en-US/docs/Web/JavaScript" title="/en-US/docs/Web/JavaScript">JavaScript</a>, <a href="/en-US/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a> i imatges, fent-los més portàtils a altres ubicacions.</p> + +<p>Alguns desavantatges d'aquest mètode són que la imatge no està emmagatzemada a la memòria cau, i per a imatges més grans la url codificada pot arribar a ser bastant llarga.</p> + +<h3 id="Usar_marcs_d'un_vídeo">Usar marcs d'un vídeo</h3> + +<p>També es pot utilitzar marcs d'un vídeo, presentat per un element {{HTMLElement("video")}} (fins i tot si el vídeo no és visible). Per exemple, si tenim un element {{HTMLElement("video")}} amb l'ID "myvideo", es pot fer:</p> + +<pre class="brush: js">function getMyVideo() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + + return document.getElementById('myvideo'); + } +} +</pre> + +<p>Això retorna l'objecte {{domxref("HTMLVideoElement")}} per al vídeo, que, com s'ha explicat anteriorment, és un dels objectes que es pot utilitzar com <code>CanvasImageSource</code>.</p> + +<h2 id="Dibuixar_imatges">Dibuixar imatges</h2> + +<p>Una vegada que tenim una referència al nostre objecte d'imatge font podem usar el mètode <code>drawImage()</code> para representar-la en el llenç. Com veurem més endavant el mètode <code>drawImage()</code> està sobrecarregat i té diverses variants. En la seva forma més bàsica, es veu així:</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y)")}}</dt> + <dd>Dibuixa el <code>CanvasImageSource</code> especificat pel paràmetre <code>image</code> en les coordenades (<code>x</code>, <code>y</code>).</dd> +</dl> + +<div class="note"> +<p>Les imatges SVG han d'especificar un amplada i una alçada en l'element arrel <svg>.</p> +</div> + +<h3 id="Exemple_Un_gràfic_de_línia_senzilla">Exemple: Un gràfic de línia senzilla</h3> + +<p>En el següent exemple, utilitzarem una imatge externa com a fons per un petit gràfic de línia. L'ús de fons pot fer que el script sigui considerablement més petit perquè evitem la necessitat de codi per generar el fons. En aquest exemple, només estem utilitzant una imatge, per la qual cosa s'utilitza el controlador d'esdeveniments <code>load</code> de l'objecte image per executar les sentències de dibuix. El mètode <code>drawImage()</code> col·loca el fons en la coordenada (0,0), que és la cantonada superior esquerra del llenç.</p> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="180" height="150"></canvas> + </body> +</html> +</pre> +</div> + +<pre class="brush: js;highlight[5]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + var img = new Image(); + img.onload = function() { + ctx.drawImage(img, 0, 0); + ctx.beginPath(); + ctx.moveTo(30, 96); + ctx.lineTo(70, 66); + ctx.lineTo(103, 76); + ctx.lineTo(170, 15); + ctx.stroke(); + }; + img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png'; +}</pre> + +<p><span class="s3gt_translate_tooltip_variant" id="s3gt_translate_tooltip_variant_to_id_0">El gràfic resultant és el següent</span>:</p> + +<p>{{EmbedLiveSample("Example_A_simple_line_graph", 220, 160, "https://mdn.mozillademos.org/files/206/Canvas_backdrop.png")}}</p> + +<h2 id="Escalar">Escalar</h2> + +<p>La segona variant del mètode <code>drawImage()</code> afegeix dos nous paràmetres i ens permet col·locar imatges a escala en el llenç.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y, width, height)")}}</dt> + <dd>Això afegeix els paràmetres <code>width</code> i <code>height</code>, que indiquen la grandària al que s'ha d'escalar la imatge en dibuixar-la sobre el llenç.</dd> +</dl> + +<h3 id="Exemple_Mosaic_d'una_imatge">Exemple: Mosaic d'una imatge</h3> + +<p>En aquest exemple, usarem una imatge com a fons de pantalla i la repetirem diverses vegades sobre el llenç. Això es fa, simplement, fent un bucle i col·locant les imatges escalades en diferents posicions. En el codi següent, el primer cicle de bucle itera sobre les files. El segon cicle <code>for</code> itera sobre les columnes. La imatge s'escala a un terç de la seva grandària original, que és de 50x38 píxels.</p> + +<div class="note"> +<p><strong>Nota</strong>: Les imatges poden tornar-se borroses en augmentar l'escala o granuloses si es redueixen massa. Escalar és millor no fer-ho, si tenim una mica de text que ha de seguir sent llegible.</p> +</div> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> +</div> + +<pre class="brush: js">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + var img = new Image(); + img.onload = function() { + for (var i = 0; i < 4; i++) { + for (var j = 0; j < 3; j++) { + ctx.drawImage(img, j * 50, i * 38, 50, 38); + } + } + }; + img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg'; +}</pre> + +<p>El llenç resultant es veu així:</p> + +<p>{{EmbedLiveSample("Example_Tiling_an_image", 160, 160, "https://mdn.mozillademos.org/files/251/Canvas_scale_image.png")}}</p> + +<h2 id="Retallar">Retallar</h2> + +<p>La tercera i última variant del mètode <code>drawImage()</code> té vuit paràmetres a més de la font d'imatge. Ens permet retallar una secció de la imatge font, després escalar-la i dibuixar-la en el llenç.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)")}}</dt> + <dd>Donada una <code>image</code>, aquesta funció pren l'àrea de la imatge font especificada pel rectangle, la cantonada superior esquerra de la qual és (<code>sx</code>, <code>sy</code>) i l'amplada de la qual i l'alçada són <code>sWidth</code> i <code>sHeight</code> i la dibuixa en el llenç, col·locant-la sobre el llenç a (<code>dx</code>, <code>dy</code>) i escalant-la a la grandària especificada per <code>dWidth</code> i <code>dHeight</code>.</dd> +</dl> + +<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/225/Canvas_drawimage.jpg" style="float: right; height: 290px; width: 300px;">Per entendre realment què fa això, pot ajudar, mirar la imatge a la dreta. Els primers quatre paràmetres defineixen la ubicació i la grandària del retall en la imatge font. Els últims quatre paràmetres defineixen el rectangle en el qual dibuixar la imatge sobre el llenç de destinació.</p> + +<p>El retallar pot ser una eina útil quan es desitja fer composicions. Es pot tenir tots els elements en un sol arxiu d'imatge i usar aquest mètode per compondre un dibuix complet. Per exemple, si es vol fer una gràfic, tenint una imatge PNG que contingui tot el text necessari en un sol arxiu i depenent de les dades, es podria canviar l'escala del gràfic amb bastant facilitat. Un altre avantatge és que no es necessita carregar cada imatge individualment, la qual cosa millora el rendiment de la càrrega.</p> + +<h3 id="Exemple_Enquadrar_una_imatge">Exemple: Enquadrar una imatge</h3> + +<p>En aquest exemple, usarem el mateix rinoceront que en l'exemple anterior, però li retallarem el cap i el compondrem en un marc d'imatge. La imatge del marc és una imatge PNG de 24 bits que inclou una ombra. A causa que les imatges PNG de 24 bits inclouen un canal alfa complet de 8 bits, a diferència de les imatges GIF i PNG de 8 bits, es poden col·locar en qualsevol fons sense que preocupi el color mat.</p> + +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + <div style="display:none;"> + <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227"> + <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150"> + </div> + </body> +</html> +</pre> + +<pre class="brush: js">function draw() { + var canvas = document.getElementById('canvas'); + var ctx = canvas.getContext('2d'); + + // Draw slice + ctx.drawImage(document.getElementById('source'), + 33, 71, 104, 124, 21, 20, 87, 104); + + // Draw frame + ctx.drawImage(document.getElementById('frame'), 0, 0); +}</pre> + +<p>Aquesta vegada hem pres un enfocament diferent per carregar les imatges. En lloc de carregar-les creant nous objectes {{domxref("HTMLImageElement")}}, les incloem com a etiquetes {{HTMLElement("img")}} directament en el nostre codi font HTML i recuperem les imatges d'aquestes . Les imatges s'oculten de la sortida, establint la propietat CSS {{cssxref("display")}} a <em>none</em> per a aquestes imatges.</p> + +<p>{{EmbedLiveSample("Example_Framing_an_image", 160, 160, "https://mdn.mozillademos.org/files/226/Canvas_drawimage2.jpg")}}</p> + +<p>El propi script és molt senzill. Cada {{HTMLElement("img")}} se li assigna un atribut ID, la qual cosa facilita la selecció dels mateixos mitjançant {{domxref("document.getElementById()")}}. A continuació, simplement usem <code>drawImage()</code> per retallar el rinoceront de la primera imatge i escalar-lo en el llenç, després dibuixem el marc en la part superior usant una segona crida a <code>drawImage()</code>.</p> + +<h2 id="Exemple_de_galeria_d'art">Exemple de galeria d'art</h2> + +<p>En l'últim exemple d'aquest capítol, construirem una petita galeria d'art. La galeria consisteix en una taula que conté diverses imatges. Quan es carrega la pàgina, s'insereix un element {{HTMLElement("canvas")}} per a cada imatge i es dibuixa un marc al seu voltant.</p> + +<p>En aquest cas, cada imatge té una amplada i alçada fixa, igual que el marc que es dibuixa al seu al voltant. Es pot millorar el script (seqüència de comandaments) perquè usi l'amplada i l'alçada de la imatge, perquè el marc s'adapti perfectament al seu voltant.</p> + +<p>El següent codi ha de ser autoexplicatiu. Recorrem el contenidor {{domxref("document.images")}} i afegim nous elements canvas. Probablement l'única cosa que cal tenir en compte, per a aquells que no estan tan familiaritzats amb el DOM, és l'ús del mètode {{domxref("Node.insertBefore")}}. <code>insertBefore()</code> és un mètode del node pare (una cel·la de taula) de l'element (image) en que previament inserirem un nou node (l'element canvas).</p> + +<pre class="brush: html"><html> + <body onload="draw();"> + <table> + <tr> + <td><img src="https://mdn.mozillademos.org/files/5399/gallery_1.jpg"></td> + <td><img src="https://mdn.mozillademos.org/files/5401/gallery_2.jpg"></td> + <td><img src="https://mdn.mozillademos.org/files/5403/gallery_3.jpg"></td> + <td><img src="https://mdn.mozillademos.org/files/5405/gallery_4.jpg"></td> + </tr> + <tr> + <td><img src="https://mdn.mozillademos.org/files/5407/gallery_5.jpg"></td> + <td><img src="https://mdn.mozillademos.org/files/5409/gallery_6.jpg"></td> + <td><img src="https://mdn.mozillademos.org/files/5411/gallery_7.jpg"></td> + <td><img src="https://mdn.mozillademos.org/files/5413/gallery_8.jpg"></td> + </tr> + </table> + <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150"> + </body> +</html> +</pre> + +<p><span id="result_box" lang="ca"><span>I aquí hi ha una mica de CSS per fer que les coses es vegin bé</span></span>:</p> + +<pre class="brush: css">body { + background: 0 -100px repeat-x url(https://mdn.mozillademos.org/files/5415/bg_gallery.png) #4F191A; + margin: 10px; +} + +img { + display: none; +} + +table { + margin: 0 auto; +} + +td { + padding: 15px; +} +</pre> + +<p>Javascript ho lliga tot junt, per dibuixar les imatges emmarcades:</p> + +<pre class="brush: js">function draw() { + + // Loop through all images + for (var i = 0; i < document.images.length; i++) { + + // Don't add a canvas for the frame image + if (document.images[i].getAttribute('id') != 'frame') { + + // Create canvas element + canvas = document.createElement('canvas'); + canvas.setAttribute('width', 132); + canvas.setAttribute('height', 150); + + // Insert before the image + document.images[i].parentNode.insertBefore(canvas,document.images[i]); + + ctx = canvas.getContext('2d'); + + // Draw image to canvas + ctx.drawImage(document.images[i], 15, 20); + + // Add frame + ctx.drawImage(document.getElementById('frame'), 0, 0); + } + } +}</pre> + +<p>{{EmbedLiveSample("Art_gallery_example", 725, 400)}}</p> + +<h2 id="Controlar_el_comportament_d'escalat_de_la_imatge">Controlar el comportament d'escalat de la imatge</h2> + +<p>Com es va esmentar anteriorment, l'escalat d'imatges pot donar com a resultat objectes borrosos o bloquejats a causa del procés d'escalat. Es pot utilitzar la propietat {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} del context de dibuix, per controlar l'ús d'algoritmes de suavitzat d'imatge en escalar imatges dins del seu context. Per defecte, això és <code>true</code>, la qual cosa significa que les imatges se suavitzaran en escalar-les. Aquesta característica es pot deshabilitar d'aquesta manera:</p> + +<pre class="brush: js">ctx.mozImageSmoothingEnabled = false; +ctx.webkitImageSmoothingEnabled = false; +ctx.msImageSmoothingEnabled = false; +ctx.imageSmoothingEnabled = false; +</pre> + +<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations")}}</p> diff --git a/files/ca/web/api/canvas_api/tutorial/ús_bàsic/index.html b/files/ca/web/api/canvas_api/tutorial/ús_bàsic/index.html new file mode 100644 index 0000000000..fb15a62d81 --- /dev/null +++ b/files/ca/web/api/canvas_api/tutorial/ús_bàsic/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_<canvas>">L'element <code><canvas></code></h2> + +<pre class="brush: html"><canvas id="tutorial" width="150" height="150"></canvas> +</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><canvas></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><canvas></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><canvas></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><canvas></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><canvas></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><canvas></code>. Els navegadors que no suporten <code><canvas></code> ignoraran el contenidor i mostraran el contingut alternatiu dins del mateix. Els navegadors que suporten <code><canvas></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"><canvas id="stockGraph" width="150" height="150"> + current stock price: $3.15 + 0.15 +</canvas> + +<canvas id="clock" width="150" height="150"> + <img src="images/clock.png" width="150" height="150" alt=""/> +</canvas> +</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_<canvas>_obligatoria">Etiqueta <code></canvas></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></canvas></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><canvas id="foo" ...></canvas></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"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"/> + <title>Canvas tutorial</title> + <script type="text/javascript"> + function draw() { + var canvas = document.getElementById('tutorial'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + } + } + </script> + <style type="text/css"> + canvas { border: 1px solid black; } + </style> + </head> + <body onload="draw();"> + <canvas id="tutorial" width="150" height="150"></canvas> + </body> +</html> +</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"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"/> + <script type="application/javascript"> + 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); + } + } + </script> + </head> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</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> |