1.5 KiB
title | localeTitle |
---|---|
Basic Usage | Uso básico |
Uso básico de lona
Cuando use canvas
, primero coloque un canvas
en el documento como un elemento.
<canvas width="400" height="400" id="canvas"></canvas>
Los atributos de width
y height
controlarán el tamaño del canvas
. Estos atributos controlan el tamaño del canvas
de dibujo, no el tamaño real renderizado. Consulte la página "Dimensiones del Canvas" para obtener más información.
Para usar un canvas
, primero debemos tomar el elemento de la página como un elemento DOM, y luego obtener un contexto de dibujo de él.
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
Todas las llamadas de dibujo después de esto se harán desde el objeto ctx
. El ctx
representa el contexto de dibujo del objeto y contiene información sobre el espacio de dibujo 2D. El objeto canvas
es el elemento DOM real. Interactuar con él nos permite acceder a atributos como el width
y el height
.
Hay algunos contextos de dibujo disponibles, incluyendo webgl
. WebGL es realmente una tecnología completamente diferente, por lo que solo nos centraremos en el dibujo 2D.
Los caminos son el bloque de construcción del dibujo en canvas
. Vea la página de ' Rutas ' para más.