O <canvas> é um elemento HTML que pode ser usado para desenhar gráficos usando uma liguagem de script (normalmente JavaScript). Ele pode, por exemplo, ser usado para desenhar gráficos, fazer composição de fotografias ou simples (e não tão simples) animações. A imagem à direita mostra alguns exemplos de implementações do <canvas> que veremos mais adiante neste tutorial.
O <canvas> foi introduzido pela Apple para o Mac OS X Dashboard e mais tarde implementado no Safari e Google Chrome. Navegadores baseados no Gecko 1.8, como o Firefox 1.5, também suportam esse elemento. O elemento <canvas> é parte da especificação WhatWG Web applications 1.0 também conhecido como HTML5.
Este tutorial descreve como implementar o elemento <canvas> em suas páginas HTML. Os exemplos apresentados devem dar-lhe algumas ideias claras que você pode fazer com <canvas> e pode ser usado para iniciar a construção de suas próprias implementações.
Antes de começar
Usar o elemento <canvas> não é muito difícil, mas você precisa de um conhecimento básico de HTML e JavaScript.
O elemento <canvas> não é suportado em alguns navegadores mais antigos, mas é suportada no Firefox 1.5 e posterior, Opera 9 e posterior, as versões mais recentes do Safari, Chrome e Internet Explorer 9.
Neste tutorial
- Basic usage
- Drawing shapes
- Using images
- Applying styles and colors
- Transformations
- Compositing
- Basic animations
- Optimizing the canvas
veja também
- Canvas topic page
- Drawing Graphics with Canvas
- Canvas examples
- HTML5 Tutorial
- Drawing Text Using a Canvas
- Adding Text to Canvas
- Canvas Demos - Games, applications, tools and tutorials
- Canvas Drawing Tool
- Canvas Animation Application
- interactive canvas tutorial
- Canvas Cheat Sheet with all attributes and methods
- Adobe Illustrator to Canvas plug-in
- HTML5CanvasTutorials
- How to draw a point with the Canvas API
- How to draw N grade Bézier curves with the Canvas API
- 31 days of canvas tutorials