Canvas API

Afegit en HTML5, l'element HTML <canvas> pot ser usat per dibuixar gràfics a través de scripts en JavaScript. Per exemple, es pot utilitzar per dibuixar gràfics, fer composicions fotogràfiques, crear animacions o, fins i tot, processar o representar vídeos en temps real.

Les aplicacions de Mozilla van obtenir compatibilitat amb <canvas> a partir de Gecko 1.8 (és a dir Firefox 1.5). L'element va ser introduït originalment per Apple per al tauler OS X i Safari. Internet Explorer suporta <canvas> a partir de la versió 9; per a versions anteriors de IE, una pàgina pot efectivament afegir suport per <canvas> en incloure un script del projecte Google's Explorer Canvas. Google Chrome i Opera 9 també són compatibles amb <canvas>.

L'element <canvas> també és utilitzat per WebGL per dibuixar gràfics 3D accelerats per maquinari en pàgines web.

Exemple

Aquest és només un fragment de codi senzill que utilitza el mètode CanvasRenderingContext2D.fillRect().

HTML

<canvas id="canvas"></canvas>

JavaScript

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

ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 100);

Editeu el codi següent i vegeu els canvis actualitzats en directe al llenç:

<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.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 100);</textarea>

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

Referència

Les interfícies relacionades amb WebGLRenderingContext estan referenciades en WebGL.

CanvasCaptureMediaStream està relacionat.

Guies i tutorials

Tutorial Canvas

Un tutorial complet que abasta tant l'ús bàsic de <canvas> com les seves funcions avançades.

Fragments de codi: Canvas

Alguns fragments de codi orientats a desenvolupadors d'extensions que involucren <canvas>.

Demostració: Un llançador de rajos bàsic

Una demostració d'animació de traçat de rajos usant canvas.

Dibuixar objectes DOM en canvas

Com dibuixar contingut DOM, com ara elements HTML, dins de canvas.

Manipular vídeo utilitzant canvas

Combinar <video> i <canvas> per manipular dades de vídeo en temps real.

Recursos

Genèric

• Aprofundint en  canvas HTML5
• Manual de Canvas

Biblioteques

• Fabric.js és una biblioteca de canvas de codi obert amb funcions d'anàlisi de SVG.
• Kinetic.js  és una biblioteca de canvas de codi obert centrada en la interactivitat per a aplicacions d'escriptori i mòbils.
• Paper.js és un marc de seqüències d'ordres gràfiques de vectors, de codi obert que s'executa a la part superior de Canvas HTML5.
• Origami.js és una biblioteca de canvas lleugera de codi obert.
• libCanvas és un marc de canvas potent i lleuger.
• Processing.js és un port del llenguatge de visualització de processament.
• PlayCanvas és un motor de joc de codi obert.
• Pixi.js és un motor de joc de codi obert.
• PlotKit és una biblioteca mapes gràfics i gràfics.
• Rekapi és una API d'animació d'emmarcat de tecles per Canvas.
• PhiloGL és un marc WebGL per a la visualització de dades, codificació creativa i el desenvolupament de jocs
• JavaScript InfoVis Toolkit crea visualitzacions interactives de dades 2D Canvas per la Web.
• EaselJS és una biblioteca de codi obert/lliure per facilitar l'ús de canvas en jocs i art
• Scrawl-canvas és una altra biblioteca de codi obert Javascript per crear i manipular elements 2d canvas.
• heatmap.js és una biblioteca de codi obert per crear mapes de calor basats en canvas.

Especificacions

Vegeu també

• WebGL