Comentario: El ancho y la altura predeterminados del lienzo son 300 y 150. Para evitar excepciones, es mejor usar atributos de pantalla para agregarlos en lugar de usar CSS para agregar ancho y altura. A continuación se muestra una breve introducción a las precauciones para usar lienzo. Los amigos interesados pueden referirse a él. Espero que te sea útil.
1. Tutorial chino de lienzo https://developer.mozilla.org/zh-cn/docs/canvas_tutorial2. El ancho y la altura predeterminados del lienzo son 300 y 150. Para evitar excepciones, es mejor usar los atributos de visualización para agregarlos en lugar de usar CSS para agregar ancho y altura.
3. Instrucciones para agregar navegadores que no admiten la etiqueta de lienzo dentro de la etiqueta de lienzo
4. También puede determinar si el navegador admite el lienzo a través del siguiente código JS.
var canvas = document.getElementById ('tutorial');
if (canvas.getContext) {
var ctx = canvas.getContext ('2d');
// Código de dibujo aquí
} demás {
// código de lienzo-no compatible aquí
}
5. El lienzo solo admite el dibujo de una forma básica, es decir, rectángulos, pero se pueden dibujar otras figuras a través de la ruta de lienzo.
6. Hay cuatro funciones para dibujar un rectángulo: rect, relleno, strokerect y clearrect
7. La función de BeginPath se usa para comenzar una nueva capa de ruta. Si no se agrega, significa dibujar en la capa de ruta original. Los efectos de los siguientes dos códigos son completamente diferentes. El primer código muestra dos líneas rojas, y el segundo código muestra una línea negra y una línea roja.
var ctx = document.getElementById ('cvs'). getContext ('2d');
ctx.beginpath ();
ctx.moveto (100.5,20.5);
CTX.Lineto (200.5, 20.5);
ctx.stroke ();
ctx.moveto (100.5,40.5);
CTX.Lineto (200.5, 40.5)
ctx.strokestyle = '#f00';
ctx.stroke ();
var ctx = document.getElementById ('cvs'). getContext ('2d');
ctx.beginpath ();
ctx.moveto (100.5,20.5);
CTX.Lineto (200.5, 20.5);
ctx.stroke ();
ctx.beginpath ();
ctx.moveto (100.5,40.5);
CTX.Lineto (200.5, 40.5)
ctx.strokestyle = '#f00';
ctx.stroke ();
8. Si la ruta no está obligada a cerrar, ClosePath se puede usar. Si se usa el relleno, la ruta se cerrará automáticamente. Ya no hay necesidad de usar Closepath.
9. Mientras tenga suficiente paciencia, puede usar la curva Bezier para dibujar cualquier figura.
10. Hay un error en la curva cuadrática debajo de Firefox, por lo que se puede usar la curva cúbica en lugar de la curva cuadrática.
11. Las imágenes (como PNG, GIF, JPEG, etc.) se pueden introducir en lienzo, y otros elementos de lienzo también se pueden usar como fuente de la imagen.
12. A continuación se muestra el código básico de dibujo de la imagen del lienzo, donde la imagen es la imagen o el objeto de lienzo, X e Y son sus coordenadas iniciales en el lienzo de destino
Drawimage (Imagen, X, Y)
El siguiente código representa la imagen zoom, el ancho y la altura representan el tamaño zoomado
Drawimage (imagen, x, y, ancho, altura)
El siguiente código representa una imagen de recorte. El primer parámetro es el mismo que los demás, ambos son referencias a una imagen u otro lienzo. Los otros 8 parámetros representan respectivamente las coordenadas X iniciales del corte en la imagen, las coordenadas y iniciales del corte en la imagen, el ancho del área de corte, la altura del área de corte, las coordenadas x de la posición dibujada, las coordenadas y de la posición dibujada, el ancho de la figura de la altura, la altura de la altura de la altura de la figura de la altura de la figura del tamaño, el tamaño de la figura del tamaño de la figura del tamaño, el tamaño de la figura de la figura del tamaño. tamaño de la imagen dibujada.
Drawimage (Image, SX, Sy, Swidth, Sheight, DX, DY, Dwidth, Dheight)
13. Strokestyle se usa para establecer el color del esquema gráfico, mientras que FillStyle se usa para establecer el color del relleno. El color puede ser una cadena, objeto de gradiente o objeto de patrón que representa el valor de color CSS. Por defecto, tanto los colores de línea como de relleno son negros (CSS Color Value #000000).
14. La transparencia de la imagen puede expresarse mediante globalalpha = valor de transparencia o valor de color rgba
15. La propiedad de ancho de línea establece el grosor de la línea dibujada actual. Para resolver el error de ancho de línea 1px, se usa +0.5 para resolverlo.
16. La línea en la línea más a la izquierda del atributo Linecap usa el trasero predeterminado. Cabe señalar que está al ras con la línea auxiliar. En el medio está el efecto de la redonda, y un semicírculo con un radio de la mitad del ancho de la línea se agrega en el punto final. A la derecha está el efecto del cuadrado, con un cuadrado con igual ancho y una altura de la mitad del ancho de línea agregado en el punto final.
17. Aquí también uso tres polilines como ejemplo para establecer diferentes valores de Linejoin. El superior es el efecto de la redonda, los bordes y las esquinas se redondean y el radio del círculo es igual al ancho de la línea. El medio y el fondo son los efectos del bisel y el inglete respectivamente. Cuando el valor es MITER, el segmento de línea se extenderá fuera de la conexión hasta que se cruza en un punto. El efecto de extensión está restringido por el atributo Miterlimit que se introducirá a continuación
18. Los métodos de guardado y restauración se utilizan para guardar y restaurar el estado de lienzo, y tampoco tienen parámetros. El estado del lienzo es una instantánea de todos los estilos y deformaciones aplicadas a la pantalla actual. El estado de lienzo se guarda en forma de montón (pila). Cada vez que se llama al método de guardado, el estado actual se empujará al montón y se guardará. Cada vez que se llama al método de restauración, el estado guardado anterior aparece desde el montón y se restaura todas las configuraciones.
19. Transformar (1, 0, 0, 1, 0, 0) Los parámetros representan escala horizontal, rotación horizontal (en sentido horario), rotación vertical (en sentido antihorario), escala vertical, desplazamiento horizontal, desplazamiento vertical
setTransform (1, 0, 0, 1, 0, 0) significa restablecer la matriz de transformación anterior y luego construir una nueva matriz. Los parámetros son los mismos que anteriores
Rotar (ángulo), (un radio es igual a 1 radian, 2πr/r = radian, es decir, 360 = 2π, es decir, 1 = π/180)
20. La animación en realidad está limpiando constantemente el Artboard (ClearRect ()) y luego lo repite