32 lines
1.5 KiB
Markdown
32 lines
1.5 KiB
Markdown
---
|
|
title: Basic Usage
|
|
localeTitle: Uso básico
|
|
---
|
|
## Uso básico de lona
|
|
|
|
Cuando use lienzo, primero coloque un lienzo en el documento como un elemento.
|
|
|
|
```html
|
|
|
|
<canvas width="400" height="400" id="canvas"></canvas>
|
|
```
|
|
|
|
Los atributos de `width` y `height` controlarán el tamaño del lienzo. Estos atributos controlan el tamaño del lienzo de dibujo, no el tamaño real renderizado. Consulte la página "Dimensiones del lienzo" 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.
|
|
|
|
```js
|
|
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](/articles/canvas/paths) ' para más.
|
|
|
|
#### Más información:
|
|
|
|
* [API MDN Canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)
|
|
* [HTMLCanvasElement.getContext () (MDN)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext) |