Baseline Widely available
A Canvas API provê maneiras de desenhar gráficos via JavaScript e via elemento HTML <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.
A Canvas API foca amplamente em gráficos 2D. A WebGL API, que também usa o elemento <canvas>, desenha gráficos 2D e 3D acelerados por hardware.
Este exemplo simples desenha um retângulo verde para um canvas.
HTML<canvas id="canvas"></canvas>
O método Document.getElementById() pega uma referência para o elemento HTML <canvas>. Em seguida, o método HTMLCanvasElement.getContext() pega o contexto daquele elemento - a coisa sobre a qual o desenho será renderizado.
O desenho atual é feito usando a interface CanvasRenderingContext2D. A propriedade fillStyle faz o retângulo verde. O método fillRect() coloca seu canto superior direito em (10, 10) e dá a ele o tamanho de 150 unidades de largura e 100 de altura.
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 150, 100);
Um tutorial compreensivo abordando o uso básico da API de Canvas e suas funcionalidades avançadas.
Uma introdução prática e extensa à API Canvas e WebGL.
Uma referência acessÃvel para a API Canvas.
Uma demonstração de animação ray-tracing usando canvas.
Combinando <video> e <canvas> para manipular dados de vÃdeo em tempo real.
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.
Nota: Veja a WebGL API para bibliotecas 2D e 3D que usam WebGL.
Especificações Compatibilidade com navegadores Ver tambémRetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4