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()
(en-US).
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ç:
Referència
Les interfícies relacionades amb WebGLRenderingContext
estan referenciades en WebGL.
CanvasCaptureMediaStream
(en-US) 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
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
Especificació | Estat | Comentari |
---|---|---|
HTML Living Standard The definition of '<canvas>' in that specification. |
Living Standard |