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
|
---
title: Utilização básica do Canvas
slug: Web/API/Canvas_API/Tutorial/Basic_usage
tags:
- Canvas
- HTML
- Intermediário
- Tutorial
- graficos
translation_of: Web/API/Canvas_API/Tutorial/Basic_usage
original_slug: Web/Guide/HTML/Canvas_tutorial/Utilizacao_basica
---
<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}</div>
<div class="summary"><span id="result_box" lang="pt"><span>Vamos começar este tutorial olhando para o elemento </span></span> {{HTMLElement("canvas")}} {{Glossary("HTML")}} <span lang="pt"><span> em si.</span> <span>No final desta página, você saberá como configurar um contexto de canvas 2D e desenhar um primeiro exemplo em seu navegador.</span></span></div>
<h2 id="O_elemento_<canvas>">O elemento <code><canvas></code></h2>
<p>Vamos começar esse tutorial olhando o elemento {{HTMLElement("canvas")}} em si.</p>
<pre class="brush: html"><canvas id="tutorial" width="150" height="150"></canvas>
</pre>
<p>Se parece muito com o elemento <code><img> </code>com a diferença de não possuir os atributos <code>src</code> e <code>alt</code>. O elemento <code><canvas></code> tem apenas dois atributos - <em><strong>width</strong> </em>e <em><strong>height</strong>. </em>Ambos são opcionais e podem ser aplicados utilizando as propriedades <a href="/en-US/docs/DOM" rel="internal" title="en/DOM">DOM</a> respectivas. Se não forem especificados, o canvas será iniciado com <strong>300 <em>pixels</em></strong><em> </em>de largura por <strong>150 <em>pixels</em></strong><em> </em>de altura. O elemento pode ser redimensionado por <a href="/en-US/docs/Web/CSS" rel="internal" title="en/CSS">CSS</a>, mas durante a renderização a imagem é escalonada para caber no tamanho do layout.</p>
<div class="note">
<p><strong>Nota:</strong> Se as suas renderizações parecerem distorcidas, tente especificar os atributos <code>width</code> e <code>height</code> no <code><canvas></code> e não usando CSS.</p>
</div>
<p>O atributo <code>id</code> não é específico do elemento <code><canvas></code> mas um dos atributos padrão do HTML que pode ser aplicado em (quase) todos os elementos HTML (como o <em><code>class</code> </em>por exemplo). É sempre uma boa ideia inserir um <code>id</code> pois fica muito mais fácil de capturar o elemento no seu <em>script.</em></p>
<p>O elemento <code><canvas></code> pode ser estilizado como qualquer imagem (margem, borda, fundo, etc). Contudo, essas regras não afetarão o desenho no canvas. Nós veremos como isso é feito a seguir nesse tutorial. Quando nenhuma regra de estilo for aplicada, o canvas iniciará totalmente transparente.</p>
<div id="section_2">
<h3 id="Conteúdo_alternativo">Conteúdo alternativo</h3>
<p>Uma vez que alguns navegadores mais antigos (em particular, versões do Internet Explorer anteriores a 9) não suportam o elemento {{HTMLElement("canvas")}}, você precisará prover um conteúdo alternativo para ser mostrado nesses navegadores.</p>
<p>Isto é muito simples: basta inserir o conteúdo alternativo dentro do elemento <code><canvas></code>. Navegadores que não suportam o <code><canvas></code> irão renderizar o conteúdo alternativo. Já os navegadores que suportam <code><canvas></code> irão ignorar o conteúdo alternativo, renderizando o canvas normalmente.</p>
<p>Por exemplo, podemos prover um texto descritivo do canvas ou uma imagem estática do conteúdo. Algo como isto:</p>
<pre class="brush: html"><canvas id="stockGraph" width="150" height="150">
preço das ações: $3.15 +0.15
</canvas>
<canvas id="clock" width="150" height="150">
<img src="images/clock.png" width="150" height="150" alt=""/>
</canvas>
</pre>
<h3 id="Tag_<canvas>_é_necessária">Tag <code></canvas></code> é necessária</h3>
<p>Ao contrário do elemento {{HTMLElement("img")}}, o elemento {{HTMLElement("canvas")}} a tag de fechamento <span style="line-height: 1.5;">(</span><code style="font-style: normal; line-height: 1.5;"></canvas></code><span style="line-height: 1.5;">)</span><span style="line-height: 1.5;"> é necessária</span><span style="line-height: 1.5;">.</span></p>
<div class="note">
<p><strong>Nota:</strong> Embora as primeiras versões do navegador Safari da Apple não exijam a tag de fechamento, a especificação indica que ela é necessária para <span style="line-height: 1.5;">que haja maior compatibilidade, </span><span style="line-height: 1.5;">portanto não se esqueça de incluí-la. Essas versões do Safari (antes da versão 2.0) irão processar o conteúdo do alternativo, além da própria tela, a menos que você use o CSS para mascará-lo. Felizmente, os usuários dessas versões do Safari são raros hoje em dia.</span></p>
</div>
<p>Se o conteúdo alternativo não for necessário, um simples <code><canvas id="foo" ...></canvas></code> é totalmente compatível com todos os navegadores que suportam canvas.</p>
<h2 id="O_contexto_de_renderização">O contexto de renderização</h2>
<p>{{HTMLElement("canvas")}} cria uma superfície de desenho de tamanho fixo que expõe um ou mais contextos de renderização, que são usados para criar e manipular o conteúdo mostrado. Vamos nos concentrar no contexto de renderização 2D. Outros contextos podem fornecer diferentes tipos de renderização; por exemplo, <a href="/pt-BR/docs/Web/WebGL" style="line-height: 1.5;" title="/en-US/docs/Web/WebGL">WebGL</a> <span style="line-height: 1.5;">usa um contexto 3D ("experimental-WebGL") baseado em </span><a class="external" href="http://www.khronos.org/opengles/" rel="external">OpenGL ES</a><span style="line-height: 1.5;">.</span></p>
<p>Incialmente o canvas é branco. Para mostrar alguma coisa, primeiro um <em>script </em>precisa acessar o contexto de renderização e desenhar sobre ele. O elemento {{HTMLElement("canvas")}} tem um <a href="/en-US/docs/Web/API/HTMLCanvasElement#Methods">método</a> chamado <code>getContext()</code>, usado para obter o contexto de renderização e suas funções de desenho. <code>getContext()</code> recebe o tipo de contexto como parâmetro. Para gráficos 2D, que serão abrangidos nesse tutorial, deverá ser especificado "2d".</p>
<pre class="brush: js">var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
</pre>
<p>A primeira linha recupera o nó DOM do elemento {{HTMLElement ("canvas")}} chamando o método {{domxref ("document.getElementById()")}}. Depois de ter o nó do elemento, podemos acessar o contexto de desenho usando o método <code>getContext()</code>.</p>
<div id="section_5">
<h2 id="Verificação_de_suporte">Verificação de suporte</h2>
<p>O conteúdo alternativo é mostrado nos navegadores que não suportam o elemento {{HTMLElement("canvas")}}, mas essa checagem pode ser feita através de um <em>script</em> simplesmente testando a presença do método <code>getContext():</code></p>
<pre class="brush: js">var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// codigo de desenho aqui
} else {
// codigo para quando o canvas nao for suportado aqui
}
</pre>
</div>
</div>
<h2 id="Um_modelo_de_estrutura">Um modelo de estrutura</h2>
<p>Aqui, um modelo minimalista, que vamos usar como ponto de partida para os exemplos posteriores:</p>
<div class="note">
<p><strong>Nota:</strong> <span id="result_box" lang="pt"><span>não é uma boa prática incorporar um script dentro do HTML.</span> <span>Nós fazemos isso aqui para manter o exemplo conciso</span></span>.</p>
</div>
<pre class="brush: html"><html>
<head>
<title>Canvas tutorial</title>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
}
}
</script>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body onload="draw();">
<canvas id="tutorial" width="150" height="150"></canvas>
</body>
</html>
</pre>
<p>O <em>script </em>inclui a função chamada draw(), que é executada uma vez ao término do carregamento da página; este exemplo usa o evento <em>onload </em>do documento. Essa função, ou uma parecida, poderia usar {{domxref("window.setTimeout()")}}, {{domxref("window.setInterval()")}}, ou qualquer outro manipulador de evento, contanto que a página tenha sido carregada primeiro.</p>
<p>{{EmbedLiveSample("Um_modelo_de_estrutura", 160, 160)}}</p>
<h2 id="Um_simples_exemplo">Um simples exemplo</h2>
<p>Para começar, vamos dar uma olhada num exemplo simples que desenha a interseção de dois retângulos, dos quais um deles tem uma transparência. Exploraremos em mais detalhes o funcionamento nos exemplos posteriores.</p>
<pre class="brush: html"><html>
<head>
<script type="application/javascript">
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html></pre>
<p>Este exemplo parece assim:</p>
<p>{{EmbedLiveSample("Um_simples_exemplo", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}</p>
<p>{{PreviousNext("Web/Guide/HTML/Canvas_tutorial", "Web/Guide/HTML/Canvas_tutorial/Drawing_shapes")}}</p>
|
