From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/ca/web/api/canvas_api/index.html | 187 +++++++++++++++++++++++++++++++++ 1 file changed, 187 insertions(+) create mode 100644 files/ca/web/api/canvas_api/index.html (limited to 'files/ca/web/api/canvas_api/index.html') diff --git a/files/ca/web/api/canvas_api/index.html b/files/ca/web/api/canvas_api/index.html new file mode 100644 index 0000000000..cb61814e66 --- /dev/null +++ b/files/ca/web/api/canvas_api/index.html @@ -0,0 +1,187 @@ +--- +title: Canvas API +slug: Web/API/Canvas_API +tags: + - API + - Canvas + - Overview + - Reference +translation_of: Web/API/Canvas_API +--- +
{{CanvasSidebar}}
+ +

Afegit en HTML5, l'element HTML {{HTMLElement("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 {{domxref("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ç:

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Referència

+ +
+ +
+ +

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

+ +

{{domxref("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 {{HTMLElement("video")}} i {{HTMLElement("canvas")}} per manipular dades de vídeo en temps real.
+
+ +

Recursos

+ +

Genèric

+ + + +

Biblioteques

+ + + +

Especificacions

+ + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '<canvas>')}}{{Spec2('HTML WHATWG')}} 
+ +

Vegeu també

+ + -- cgit v1.2.3-54-g00ecf