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
|
---
title: Canvas
slug: Web/API/Canvas_API
tags:
- API
- Canvas
- Referência(2)
translation_of: Web/API/Canvas_API
original_slug: Web/HTML/Canvas
---
<p>{{CanvasSidebar}}</p>
<p class="summary">A <strong>Canvas API</strong> provê maneiras de desenhar gráficos via <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript">JavaScript</a> e via elemento <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML">HTML</a> {{HtmlElement("canvas")}}. Entre outras coisas, ele pode ser utilizado para animação, gráficos de jogos, visualização de dados, manipulação de fotos e processamento de vídeo em tempo real.</p>
<p class="summary">A Canvas API foca amplamente em gráficos 2D. A <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/WebGL">WebGL API</a>, que também usa o elemento <code><canvas></code>, desenha gráficos 2D e 3D acelerados por hardware.</p>
<h2 id="Exemplo_básico">Exemplo básico</h2>
<p>Este exemplo simples desenha um retângulo verde para um canvas.</p>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><canvas id="canvas"></canvas>
</pre>
<h3 id="JavaScript">JavaScript</h3>
<p>O método {{domxref("Document.getElementById()")}} pega uma referência para o elemento HTML <code><canvas></code>. Em seguida, o método {{domxref("HTMLCanvasElement.getContext()")}} pega o contexto daquele elemento - a coisa sobre a qual o desenho será renderizado.</p>
<p>O desenho atual é feito usando a interface {{domxref("CanvasRenderingContext2D")}}. A propriedade {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} faz o retângulo verde. O método {{domxref("CanvasRenderingContext2D.fillRect()", "fillRect()")}} coloca seu canto superior direito em (10, 10) e dá a ele o tamanho de 150 unidades de largura e 100 de altura.</p>
<pre class="brush: js">const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 150, 100);
</pre>
<h3 id="Resultado">Resultado</h3>
<p>{{ EmbedLiveSample('Exemplo_básico', 700, 180) }}</p>
<h2 id="Referência">Referência</h2>
<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}}</li>
<li>{{domxref("ImageBitmapRenderingContext")}} {{experimental_inline}}</li>
</ul>
<div class="blockIndicator note">
<p><strong>Nota:</strong> As interfaces relacionadas ao <code>WebGLRenderingContext</code> são referenciadas sob <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a>.</p>
</div>
<p>{{domxref("CanvasCaptureMediaStream")}} é uma interface relacionada.</p>
<h2 id="Guias_e_Tutoriais">Guias e Tutoriais</h2>
<dl>
<dt></dt>
<dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial">Tutorial Canvas</a></dt>
<dd>Um tutorial compreensivo abordando o uso básico da API de Canvas e suas funcionalidades avançadas.</dd>
<dt><a href="http://joshondesign.com/p/books/canvasdeepdive/title.html">Mergulhando no Canvas HTML5</a></dt>
<dd>Uma introdução prática e extensa à API Canvas e WebGL.</dd>
<dt><a href="http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html">Guia Canvas</a></dt>
<dd>Uma referência acessível para a API Canvas.</dd>
<dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Canvas_API/A_basic_ray-caster">Demonstração: Um <em>ray-caster</em> básico</a> </dt>
<dd>Uma demonstração de animação <em>ray-tracing</em> usando canvas.</dd>
<dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">Manipulando vídeos usando canvas</a></dt>
<dd>Combinando {{HTMLElement("video")}} e {{HTMLElement("canvas")}} para manipular dados de vídeo em tempo real.</dd>
</dl>
<h2 id="Bibliotecas">Bibliotecas</h2>
<p>A API Canvas é extremamente poderosa, mas nem sempre é simples de usar. As bibliotecas listadas abaixo podem fazer a criação de projetos baseados em canvas mais rápida e fácil.</p>
<ul>
<li><a href="http://www.createjs.com/easeljs">EaselJS</a> é uma biblioteca de código aberto que facilita criações de jogos, arte generativa e outras experiências altamente gráficas.</li>
<li><a href="http://fabricjs.com/">Fabric.js</a> é uma biblioteca código aberto em canvas com suporte à SVG.</li>
<li><a href="https://www.patrick-wied.at/static/heatmapjs/">heatmap.js</a> é uma biblioteca de código aberto para criar mapas de calor (heatmaps) baseados em canvas.</li>
<li><a href="http://thejit.org/">JavaScript InfoVis Toolkit</a> cria visualizações de dados interativas.</li>
<li><a href="https://konvajs.github.io/">Konva.js</a> é uma biblioteca de canvas 2D para aplicações <em>desktop</em> e móveis.</li>
<li><a href="https://p5js.org/">p5.js </a>tem um conjunto completo de funcionalidades de desenho canvas para artistas, <em>designers</em>, educadores e iniciantes.</li>
<li><a href="http://paperjs.org/">Paper.js</a> é um framework de código-aberto para scripting de vetores gŕaficos que funciona sobre o Canvas HTML5.</li>
<li><a href="https://phaser.io/">Phaser</a> é um framework de código-aberto rápido, grátis e divertido para jogos de navegador desenvolvidos com Canvas e WebGL.</li>
<li><a href="http://processingjs.org/">Processing.js</a> é um conversor da linguagem de visualização Processing.</li>
<li><a href="https://ptsjs.org/">Pts.js</a> é uma biblioteca para codificação criativa e visualização em canvas e SVG.</li>
<li><a href="https://github.com/jeremyckahn/rekapi">Rekapi</a> é uma API de animação <em>key-framing</em> para Canvas.</li>
<li><a href="http://scrawl.rikweb.org.uk/">Scrawl-canvas</a> é uma biblioteca JavaScript de código aberto para criação e manipulação de elementos canvas 2D.</li>
<li>O framework <a href="http://zimjs.com/">ZIM</a> provê conveniências, componentes e controles para programar criatividade no canvas - inclui acessibilidade e centenas de tutoriais cheios de cores.</li>
</ul>
<div class="blockIndicator note">
<p><strong>Nota:</strong> Veja a <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL API</a> para bibliotecas 2D e 3D que usam WebGL.</p>
</div>
<h2 id="Especificações">Especificações</h2>
<div class="section">
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificações</th>
<th scope="col">Estado</th>
<th scope="col">Comentário</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', '#2dcontext', 'the 2D rendering context')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
</tbody>
</table>
</div>
<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>
<p>Aplicações Mozilla ganharam suporte para <code><canvas></code> a partir do Gecko 1.8 (<a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/1.5">Firefox 1.5</a>). O elemento foi originalmente introduzido pela Apple para o Dashboard OS X e Safari. O Internet Explorer suporta <code><canvas></code> quando inclui-se um script do projeto Explorer Canvas, da google. Google Chrome e Opera 9 também suportam <code><canvas></code>.</p>
<h2 id="Ver_também">Ver também</h2>
<ul>
<li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/WebGL">WebGL</a></li>
</ul>
|
