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
|
---
title: canvas
slug: Web/HTML/Element/canvas
translation_of: Web/HTML/Element/canvas
---
<h2 id="Sumário">Sumário</h2>
<p>O elemento HTML <em>Canvas</em> (<code><canvas></code>) pode ser utilizado para desenhar gráficos utilizando scripts (geralmente <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a>). Por exemplo, além de desenhar gráficos, ele pode ser usado para fazer composições de fotos e também para animações. Você poderá colocar conteúdos alternativos dentro do bloco <code><canvas></code>. Este conteúdo será renderizado também em navegadores antigos e em navegadores com JavaScript desabilitado.</p>
<p>Para mais artigos sobre canvas, veja <a href="/en/HTML/Canvas" title="en/HTML/Canvas">canvas topic page</a>.</p>
<h2 id="Contexto_de_uso">Contexto de uso</h2>
<table class="standard-table">
<tbody>
<tr>
<td>Conteúdo permitido</td>
<td>Transparente, tanto <a href="/en/HTML/Content_categories#phrasing_content" title="en/HTML/Content categories#phrasing content">phrasing content</a> ou <a href="/en/HTML/Content_categories#flow_content" title="en/HTML/Content categories#flow content">flow content</a>.</td>
</tr>
<tr>
<td>Omissão de tags</td>
<td>Nenhuma, tanto a tag de início quanto a de fim devem ser incluídas.</td>
</tr>
<tr>
<td>Elementos "pai" permitidos</td>
<td>Qualquer elemento que aceite <a href="/en/HTML/Content_categories#phrasing_content" title="en/HTML/Content categories#phrasing content">phrasing content</a> ou <a href="/en/HTML/Content_categories#flow_content" title="en/HTML/Content categories#flow content">flow content</a>. </td>
</tr>
<tr>
<td>Documento normativo</td>
<td><a class="external" href="http://www.w3.org/TR/html5/the-canvas-element.html#the-canvas-element">HTML 5, section 4.8.10</a></td>
</tr>
</tbody>
</table>
<h2 id="Atributos">Atributos</h2>
<p>Como qualquer outro elemento HTML, este também tem <a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">global attributes</a>.</p>
<dl>
<dt>{{ htmlattrdef("width") }}</dt>
<dd> A largura do espaço em pixels CSS. O padrão é 300.</dd>
<dt>{{ htmlattrdef("height") }}</dt>
<dd>A altura do espaço em pixels CSS. O padrão é 150.</dd>
</dl>
<p>{{ Note("The displayed size of the canvas can be changed using a stylesheet. The image is scaled during rendering to fit the styled size.") }}</p>
<h2 id="Interface_DOM">Interface DOM</h2>
<ul>
<li><a href="/en/DOM/HTMLCanvasElement" title="en/DOM/HTMLCanvasElement">HTMLCanvasElement</a></li>
</ul>
<h2 id="Exemplo">Exemplo</h2>
<pre class="brush: html"><<span class="start-tag">canvas</span><span class="attribute-name"> id</span>=<span class="attribute-value">"canvas" </span><span class="attribute-name">width</span>=<span class="attribute-value">"300" </span><span class="attribute-name">height</span>=<span class="attribute-value">"300"</span>>
Desculpe-me, seu navegador não suporta o elemento &<span class="entity">lt;</span>canvas&<span class="entity">gt;</span>.
</<span class="end-tag">canvas</span>>
</pre>
<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Recurso</th>
<th>Firefox (Gecko)</th>
<th>Chrome</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Suporte básico</td>
<td>{{ CompatGeckoDesktop("1.8") }}</td>
<td>1.0</td>
<td>9.0</td>
<td><a class="external" href="http://www.opera.com/docs/changelogs/windows/900/">9.0</a></td>
<td><a class="external" href="http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/HTML-canvas-guide/Introduction/Introduction.html">2.0</a></td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Recurso</th>
<th>Firefox Mobile (Gecko)</th>
<th>Android</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{ CompatGeckoMobile("1.8") }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>1.0</td>
</tr>
</tbody>
</table>
</div>
<h3 id="Notas_específicas_sobre_navegadores">Notas específicas sobre navegadores</h3>
<h4 id="Firefox_(Gecko)">Firefox (Gecko)</h4>
<ul>
<li>Antes do Gecko 5.0 {{ geckoRelease("5.0") }}, a altura e a largura do elemento canvas eram <em>integers</em> verificados.</li>
<li>Anteriormente ao Gecko 6.0 {{ geckoRelease("6.0") }}, um elemento {{ HTMLElement("canvas") }} com altura e largura iguais a zero eram renderizados como se tivesse as dimensões padrão.</li>
<li>Antes do Gecko 12.0 {{ geckoRelease("12.0") }}, se o JavaScript estivesse desabilitado, o elemento <code><canvas></code> era renderizado ao invés de mostrar o conteúdo de <em>fallback</em>, conforme a <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html">specification</a>.</li>
</ul>
<h2 id="Veja_também">Veja também</h2>
<ul>
<li><a href="/en/HTML/Canvas" title="https://developer.mozilla.org/en/HTML/Canvas">MDN canvas portal</a></li>
<li>Um <a href="/en/Canvas_tutorial" title="Canvas tutorial">canvas tutorial</a></li>
<li><a class="external" href="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html">Canvas cheat sheet</a></li>
<li><a href="/en-US/demos/tag/tech:canvas" title="https://developer.mozilla.org/en-US/demos/tag/tech:canvas/">Canvas-related demos</a></li>
</ul>
<p>{{ languages( { "de": "de/HTML/Element/canvas", "en": "en/HTML/Element/canvas", "es": "es/HTML/Elemento/canvas", "ja": "ja/HTML/Element/canvas", "ko": "ko/HTML/Element/canvas", "nl": "nl/HTML/HTML_Tags/canvas", "pl": "pl/HTML/Element/canvas", "ru": "Ru/HTML/Element/canvas", "zh-cn": "cn/HTML/Element/canvas", "fr": "fr/HTML/Element/canvas" } ) }}</p>
|
