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.