<canvas> es un elemento HTML que se puede dibujar usando scripts (generalmente js)
<canvas> WebKit fue introducido por primera vez por Apple y utilizado en Dashboard y Safari de Mac OS X
Hoy en día, todos los principales navegadores lo admiten (IE9+, las versiones inferiores deben introducir Explorer Canvas para ser compatible)
1. Comience a dibujar (contexto de renderizado)El elemento <canvas> crea un lienzo de tamaño fijo en el que se puede utilizar el contexto de representación CanvasRenderContext2D para dibujar y procesar el contenido que se mostrará.
Para dibujar en lienzo, primero debe obtener el contexto de representación CanvasRenderContext2D2d. (Esto se refiere a 2D, no habla de webgl)
const lienzo = document.getElementById('mycanvas'); const ctx = canvas.getContext('2d');ctx.fillStyle = 'pink';ctx.fillRect(10, 10, 300, 300);Ejemplo
2. Propiedades de CanvasRenderContext2D:Puede especificar el estilo del dibujo configurando las propiedades del contexto.
Todas las propiedades son las siguientes:
| propiedad | Introducción |
|---|---|
| lienzo | elemento de lienzo |
| llenarEstilo | El color, modo o degradado actual utilizado para rellenar el trazado. |
| fuente | Estilo de fuente |
| alfa global | Especifica la opacidad del contenido dibujado en el lienzo. |
| Operación compuesta global | Especificar cómo se combina un color con los colores que ya están en el lienzo (composición) |
| líneaCap | Especifica cómo se dibujan los extremos de la línea. |
| líneaDashOffset | Establecer desplazamiento del guión |
| líneaUnirse | Especificar cómo se conectan dos líneas |
| ancho de línea | Especifica el ancho de línea para operaciones de pincel (dibujo lineal) |
| límite de inglete | Cuando el atributo lineJoin es inglete, este atributo especifica la relación máxima entre la longitud de la unión diagonal y el ancho de la línea. |
| sombraDesenfoque | Nivel de efecto de desenfoque |
| sombraColor | color de sombra |
| sombraOffsetX | Distancia de desplazamiento horizontal de la sombra |
| sombraOffsetY | Distancia de desplazamiento vertical de la sombra |
| estilo de trazo | Colores, modos y degradados para trazados de pincel (dibujar) |
| textoAlinear | alineación del texto |
| línea de base de texto | Alineación vertical del texto |
El ancho y el alto del lienzo deben especificarse utilizando los valores de atributo ancho y alto.
Si no se especifica, el tamaño predeterminado del lienzo es 300×150
El ancho y el alto especificados por el estilo son solo el tamaño de visualización del elemento del lienzo, no el tamaño del entorno de dibujo.
lienzo {ancho: 1000px;alto: 600px;}<canvas id=mycanvas ancho=1000 alto=600></canvas><canvas id=mycanvas1 ancho=500 alto=300></canvas><canvas id=mycanvas2>< /lienzo>...ctx.fillStyle = rojo;ctx.fillRect(10, 10, 100, 100); Ejemplo de ancho y alto¿Por qué los estilos tienen el mismo tamaño pero se muestran de forma completamente diferente?
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.