Canvas tutorial

<canvas> é um elemento HTML que pode ser usado para desenhar usando linguagem de "script" (normalmente JavaScript). Isto pode ser usado, por exemplo, para desenhar gráficos, fazer composições de fotos ou simples (e não tão simples) animações. As imagens à direita mostram exemplos de implementações <canvas> que serão parte deste tutorial.

<canvas> foi introduzido primeiramente pela Apple para o Mac OS X Dashboard e mais tarde implemetado nos browsers Safari e Google Chrome. Os browsers baseados no Gecko 1.8, como o Firefox 1.5, também suportam este elemento. O elemento <canvas> é parte da especificação WhatWG Web applications 1.0, também conhecida como HTML5.

Este tutorial descreve como utilizar o elemento <canvas> para desenhar gráficos 2D, iniciando com o básico. Os exemplos fornecidos devem lhe trazer algumas ideias claras sobre o que você pode fazer com o canvas e irá fornecer trechos de código que podem lhe ajudar na contrução do seu próprio conteúdo. 

Antes de começar

Usar o elemento <canvas> não é muito difícil, mas antes de começar, você precisa de um conhecimento básico sobre HTML e JavaScript. O elemento <canvas> não é suportado por alguns navegadores antigos, mas é suportado em versões recentes da maioria dos navegadores. O tamanho padrão de um canvas é de 300px * 150px (largura * altura). Porém, tamanhos customizados podem ser definidos usando as propriedades width e height do CSS. Para desenhar gráficos no canvas iremos usar um contexto de objeto JavaScript, o que criará gráficos em tempo real.

Nesse tutorial

Veja também

A note to contributors

Due to an unfortunate technical error that occurred the week of June 17, 2013, we lost the history of this tutorial, including attributions to all past contributors to its content. We apologize for this, and hope you'll forgive this unfortunate mishap.

Etiquetas do documento e colaboradores

 Colaboradores desta página: angelosds, Claudiovascaino, gxovano, gutierri, trevorh
 Última atualização por: angelosds,