1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
|
---
title: Canvas API
slug: Web/API/Canvas_API
tags:
- API
- Canvas
- Overview
- Reference
translation_of: Web/API/Canvas_API
---
<div>{{CanvasSidebar}}</div>
<p class="summary">Afegit en <a href="/en-US/docs/HTML/HTML5">HTML5</a>, l'element HTML<strong> {{HTMLElement("canvas")}} </strong>pot ser usat per dibuixar gràfics a través de scripts en <a href="/en-US/docs/Web/JavaScript">JavaScript</a>. 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.</p>
<p>Les aplicacions de Mozilla van obtenir compatibilitat amb <code><canvas></code> a partir de Gecko 1.8 (és a dir <a href="/en-US/docs/Mozilla/Firefox/Releases/1.5">Firefox 1.5</a>). L'element va ser introduït originalment per Apple per al tauler OS X i Safari. Internet Explorer suporta <code><canvas></code> a partir de la versió 9; per a versions anteriors de IE, una pàgina pot efectivament afegir suport per <code><canvas></code> en incloure un script del projecte Google's <a href="https://github.com/arv/explorercanvas">Explorer Canvas</a>. Google Chrome i Opera 9 també són compatibles amb <code><canvas></code>.</p>
<p>L'element <code><canvas></code> <span id="result_box" lang="ca"><span>també és utilitzat per</span></span> <a href="/en-US/docs/Web/WebGL">WebGL</a> <span id="result_box" lang="ca"><span>per dibuixar gràfics 3D accelerats per maquinari en pàgines web.</span></span></p>
<h2 id="Exemple">Exemple</h2>
<p><span id="result_box" lang="ca"><span>Aquest és només un fragment de codi senzill que utilitza el mètode</span></span> {{domxref("CanvasRenderingContext2D.fillRect()")}}.</p>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><canvas id="canvas"></canvas>
</pre>
<h3 id="JavaScript">JavaScript</h3>
<pre class="brush: js">var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 100);
</pre>
<p><span id="result_box" lang="ca"><span>Editeu el codi següent i vegeu els canvis actualitzats en directe al llenç:</span></span></p>
<div class="hidden">
<h6 id="Playable_code">Playable code</h6>
<pre class="brush: html"><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>
</pre>
<pre class="brush: js">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);
</pre>
</div>
<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
<h2 id="Referència">Referència</h2>
<div class="index">
<ul>
<li>{{domxref("HTMLCanvasElement")}}</li>
<li>{{domxref("CanvasRenderingContext2D")}}</li>
<li>{{domxref("CanvasGradient")}}</li>
<li>{{domxref("CanvasImageSource")}}</li>
<li>{{domxref("CanvasPattern")}}</li>
<li>{{domxref("ImageBitmap")}}</li>
<li>{{domxref("ImageData")}}</li>
<li>{{domxref("RenderingContext")}}</li>
<li>{{domxref("TextMetrics")}}</li>
<li>{{domxref("OffscreenCanvas")}}{{experimental_inline}}</li>
<li>{{domxref("Path2D")}} {{experimental_inline}}{{domxref("ImageBitmapRenderingContext")}}{{experimental_inline}}</li>
</ul>
</div>
<p>Les interfícies relacionades amb <code>WebGLRenderingContext</code> estan referenciades en <a href="/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a>.</p>
<p>{{domxref("CanvasCaptureMediaStream")}} està relacionat.</p>
<h2 id="Guies_i_tutorials">Guies i tutorials</h2>
<dl>
<dt><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Tutorial Canvas </a></dt>
<dd>Un tutorial complet que abasta tant l'ús bàsic de <code><canvas></code> com les seves funcions avançades.</dd>
<dt><a href="/en-US/Add-ons/Code_snippets/Canvas">Fragments de codi: Canvas</a></dt>
<dd>Alguns fragments de codi orientats a desenvolupadors d'extensions que involucren <code><canvas></code>.</dd>
<dt><a href="/en-US/docs/Web/API/Canvas_API/A_basic_ray-caster">Demostració: Un llançador de rajos bàsic</a></dt>
<dd>Una demostració d'animació de traçat de rajos usant canvas.</dd>
<dt><a href="/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas">Dibuixar objectes DOM en canvas</a></dt>
<dd>Com dibuixar contingut DOM, com ara elements HTML, dins de canvas.</dd>
<dt><a href="/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">Manipular vídeo utilitzant canvas</a></dt>
<dd>Combinar {{HTMLElement("video")}} i {{HTMLElement("canvas")}} per manipular dades de vídeo en temps real.</dd>
</dl>
<h2 id="Recursos">Recursos</h2>
<h3 id="Genèric">Genèric</h3>
<ul>
<li><a href="http://joshondesign.com/p/books/canvasdeepdive/title.html">Aprofundint en canvas HTML5</a></li>
<li><a href="http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html">Manual de Canvas</a></li>
</ul>
<h3 id="Biblioteques"><span id="result_box" lang="ca"><span title="Libraries
">Biblioteques</span></span></h3>
<ul>
<li><a href="http://fabricjs.com">Fabric.js</a> <span id="result_box" lang="ca"><span title="Fabric.js is an open-source canvas library with SVG parsing capabilities.
">és una biblioteca de canvas de codi obert amb funcions d'anàlisi de SVG.</span></span></li>
<li><a href="https://github.com/ericdrowell/KineticJS">Kinetic.js</a> <span id="result_box" lang="ca"><span title="Kinetic.js is an open-source canvas library focused on interactivity for desktop and mobile applications.
">és una biblioteca de </span><span title="Fabric.js is an open-source canvas library with SVG parsing capabilities.
">canvas</span></span><span lang="ca"><span title="Kinetic.js is an open-source canvas library focused on interactivity for desktop and mobile applications.
"> de codi obert centrada en la interactivitat per a aplicacions d'escriptori i mòbils.</span></span></li>
<li><a href="http://paperjs.org/">Paper.js</a> <span id="result_box" lang="ca"><span title="Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas.
">é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.</span></span></li>
<li><a href="http://origamijs.com/docs/">Origami.js</a> <span id="result_box" lang="ca"><span title="Origami.js is an open source lightweight canvas library.
">és una biblioteca de </span><span title="Fabric.js is an open-source canvas library with SVG parsing capabilities.
">canvas</span></span><span lang="ca"><span title="Origami.js is an open source lightweight canvas library.
"> lleugera de codi obert.</span></span></li>
<li><a href="http://libcanvas.github.com/">libCanvas</a> <span id="result_box" lang="ca"><span title="libCanvas is powerful and lightweight canvas framework.
">és un marc de canvas potent i lleuger.</span></span></li>
<li><a href="http://processingjs.org">Processing.js</a> és un port del llenguatge de visualització de processament.</li>
<li><a href="https://playcanvas.com/">PlayCanvas</a> <span id="result_box" lang="ca"><span title="PlayCanvas is an open source game engine.
">és un motor de joc de codi obert.</span></span></li>
<li><a href="http://www.pixijs.com/">Pixi.js</a> <span id="result_box" lang="ca"><span title="PlayCanvas is an open source game engine.
">és un motor de joc de codi obert.</span></span></li>
<li><a href="http://www.liquidx.net/plotkit/">PlotKit</a> <span id="result_box" lang="ca"><span title="PlotKit is a charting and graphing library.
">és una biblioteca </span></span> mapes gràfics <span lang="ca"><span title="PlotKit is a charting and graphing library.
"> i gràfics</span></span>.</li>
<li><a class="link-https" href="https://github.com/jeremyckahn/rekapi">Rekapi</a> és una API d'animació d'emmarcat de tecles per Canvas.</li>
<li><a href="http://senchalabs.github.com/philogl/">PhiloGL</a> <span id="result_box" lang="ca"><span title="PhiloGL is a WebGL framework for data visualization, creative coding and game development.
">és un marc WebGL per a la visualització de dades, codificació creativa i el desenvolupament de jocs</span></span></li>
<li><a href="http://thejit.org/">JavaScript InfoVis Toolkit</a> crea visualitzacions interactives de dades 2D Canvas per la Web.</li>
<li><a href="http://www.createjs.com/easeljs">EaselJS</a> <span id="result_box" lang="ca"><span title="EaselJS is a free/open source library to make it easier to use canvas for games and art
">és una biblioteca de codi obert/lliure per facilitar l'ús de canvas en jocs i art</span></span></li>
<li><a href="http://scrawl.rikweb.org.uk/">Scrawl-canvas</a> <span id="result_box" lang="ca"><span title="Scrawl-canvas is another open-source javascript library for creating and manipulating 2d canvas elements
">és una altra biblioteca de codi obert Javascript per crear i manipular elements 2d</span></span> canvas.</li>
<li><a href="https://www.patrick-wied.at/static/heatmapjs/">heatmap.js</a> <span id="result_box" lang="ca"><span title="heatmap.js is an open source library to create canvas based heatmaps">és una biblioteca de codi obert per crear mapes de calor basats en</span></span> canvas.</li>
</ul>
<h2 id="Especificacions">Especificacions</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificació</th>
<th scope="col">Estat</th>
<th scope="col">Comentari</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '<canvas>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Vegeu_també">Vegeu també</h2>
<ul>
<li><a href="/en-US/docs/Web/WebGL">WebGL</a></li>
</ul>
|
