1.5 KiB
title | localeTitle |
---|---|
Basic Usage | Uso Básico |
Uso Básico do Canvas
Ao usar a tela, primeiro coloque uma tela no documento como um elemento.
<canvas width="400" height="400" id="canvas"></canvas>
Os atributos width
e height
controlam o tamanho da tela. Esses atributos controlam o tamanho da tela de desenho, não o tamanho renderizado real. Consulte a página "Dimensões da tela" para mais.
Para usar uma canvas
, devemos primeiro pegar o elemento da página como um elemento DOM e, em seguida, obter um contexto de desenho a partir dele.
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
Todas as chamadas de desenho depois disso serão feitas a partir do objeto ctx
. O ctx
representa o contexto de desenho do objeto e contém informações sobre o espaço de desenho 2D. O objeto de canvas
é o elemento DOM real. Interagir com ele nos permite acessar atributos como width
e height
.
Existem alguns contextos de desenho disponíveis, incluindo webgl
. O WebGL é realmente uma tecnologia totalmente diferente, portanto, nos concentraremos apenas no desenho 2D.
Os caminhos são o bloco de construção do desenho na canvas
. Veja a página " Caminhos " para mais.