diff options
| author | Ryan Johnson <rjohnson@mozilla.com> | 2021-04-29 16:16:42 -0700 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-04-29 16:16:42 -0700 |
| commit | 95aca4b4d8fa62815d4bd412fff1a364f842814a (patch) | |
| tree | 5e57661720fe9058d5c7db637e764800b50f9060 /files/ca/web/api/canvas_api/tutorial/basic_usage | |
| parent | ee3b1c87e3c8e72ca130943eed260ad642246581 (diff) | |
| download | translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.gz translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.bz2 translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.zip | |
remove retired locales (#699)
Diffstat (limited to 'files/ca/web/api/canvas_api/tutorial/basic_usage')
| -rw-r--r-- | files/ca/web/api/canvas_api/tutorial/basic_usage/index.html | 159 |
1 files changed, 0 insertions, 159 deletions
diff --git a/files/ca/web/api/canvas_api/tutorial/basic_usage/index.html b/files/ca/web/api/canvas_api/tutorial/basic_usage/index.html deleted file mode 100644 index cd0bfd3634..0000000000 --- a/files/ca/web/api/canvas_api/tutorial/basic_usage/index.html +++ /dev/null @@ -1,159 +0,0 @@ ---- -title: Ús bàsic de canvas -slug: Web/API/Canvas_API/Tutorial/Basic_usage -tags: - - Canvas - - Graphics - - HTML - - Intermediate - - Tutorial -translation_of: Web/API/Canvas_API/Tutorial/Basic_usage -original_slug: Web/API/Canvas_API/Tutorial/Ús_bàsic ---- -<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> |
