This translation is incomplete. Please help translate this article from English.

Comencem aquest tutorial consultant l'element <canvas> 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.

L'element <canvas>

<canvas id="tutorial" width="150" height="150"></canvas>

A primera vista, <canvas> s'assembla l'element <img> amb l'única diferència clara, que no té els atributs src i alt. De fet, l'element <canvas> només té dos atributs, width i height. Aquests són opcionals i també es poden establir utilitzant les properties DOM . Quan no s'especifiquen els atributs width i height, inicialment canvas tindrà 300 píxels d'amplada i 150 píxels d'alçada. L'element es pot dimensionar arbitràriament per 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

Nota: Si les vostres representacions semblen distorsionades, intenteu especificar els atributs width i height, explícitament, en els atributs <canvas> i no utilitzeu CSS.

L'atribut id no és específic de l'element <canvas>, però és un dels atributs HTML global que es pot aplicar a qualsevol element HTML (com class, per exemple). Sempre és una bona idea proporcionar un id, perquè això fa que sigui molt més fàcil identificar-lo en un script.

L'element <canvas> se li pot donar estil com qualsevol imatge normal (margin, border, background…). Aquestes regles, no obstant això, no afecten al dibuix real sobre el llenç. Veurem com això es fa en un capítol dedicat d'aquest tutorial. Quan no s'apliquen regles d'estil al llenç, inicialment, serà totalment transparent.

Contingut alternatiu

L'element <canvas> difereix d'una etiqueta <img> com per els elements <video>, <audio> o <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.

Proporcionar contingut alternatiu és molt senzill: simplement inseriu el contingut alternatiu dins de l'element <canvas>. Els navegadors que no suporten <canvas> ignoraran el contenidor i mostraran el contingut alternatiu dins del mateix. Els navegadors que suporten <canvas> ignoraran el contingut dins del contenidor, i simplement mostraran el llenç, normalment.

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ò:

<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>

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 fer canvas més accessible.

Etiqueta </canvas> obligatoria

Com a conseqüència de la manera en què es proporciona una solució alternativa, a diferència de l'element <img>, l'element <canvas> requereix l'etiqueta de tancament (</canvas>). Si aquesta etiqueta no està present, la resta del document es consideraria contingut alternatiu i no es mostraria.

Si no es necessita un contingut alternatiu, un simple <canvas id="foo" ...></canvas> és totalment compatible amb tots els navegadors que suporten canvas.

El context de representació

L'element <canvas> crea una superfície de dibuix de grandària fixa que exposa un o més contextos de representació, 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, WebGL utilitza un context 3D basat en OpenGL ÉS.Other contexts may provide different types of rendering; for example, WebGL uses a 3D context based on OpenGL ES.

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 <canvas> té un mètode anomenat getContext(), utilitzat per obtenir el context de representació i les seves funcions de dibuix. getContext() pren un paràmetre, el tipus de context. Per als gràfics 2D, com els que es detallen en aquest tutorial, heu d'especificar "2d" per obtenir un CanvasRenderingContext2D.

var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');

La primera línia del script recupera el node en el DOM, que representa l'element <canvas> cridant el mètode document.getElementById(). Un cop tingueu el node d'element, podeu accedir al context del dibuix mitjançant el mètode getContext().

Comprovació del suport

El contingut alternatiu es mostra en navegadors que no admeten <canvas>. Les seqüències d'ordres, també poden comprovar la compatibilitat mitjançant programació, simplement provant la presència del mètode getContext(). El nostre fragment de codi de dalt es converteix en una cosa així:

var canvas = document.getElementById('tutorial');

if (canvas.getContext) {
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}

Una plantilla esquelet

Aquí teniu una plantilla minimalista, que usarem com a punt de partida per a exemples posteriors.

Nota: no és una bona pràctica incrustar un script dins d'HTML. Ho fem aquí per mantenir l'exemple concís.

<!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>

El script inclou una funció anomenada draw(), que s'executa una vegada que la pàgina acaba de carregar-se; això es fa escoltant  l'esdeveniment load en el document. Aquesta funció, o una similar, també pot ser cridada usant window.setTimeout(), window.setInterval(), o qualsevol altre controlador d'esdeveniments, sempre que la pàgina s'hagi carregat primer.

Així és com es veuria una plantilla en acció. Com es mostra aquí, inicialment està en blanc.

Un exemple senzill

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.

<!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>

Aquest exemple es veu així:

ScreenshotLive sample

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,