Organizar algunas características nuevas de HTML5 y propiedades comunes del lienzo

Este artículo presenta principalmente algunas características nuevas de HTML5 y la clasificación de propiedades comunes del lienzo. La API de lienzo es un contenido importante utilizado en HTML5 para dibujar gráficos. Los amigos que lo necesitan pueden referirse a los siguientes 1. Tipos de contenido HTML5

pista

La API de selectores no es solo conveniente. Cuando se trata de atravesar el DOM, la API de selectores suele ser más rápida que la API de búsqueda de nodo infantil anterior. Para implementar una hoja de estilo rápida, el navegador optimiza altamente la coincidencia del selector.

El lienzo es esencialmente un lienzo de mapa de bits, donde los gráficos dibujados en él no son escalables y no pueden ampliarse y reducirse como una imagen SVG. Además, los objetos dibujados con lienzo no pertenecen a la estructura DOM de la página ni a cualquier espacio de nombres.

Programación con lienzo, primero debe obtener su contexto. Luego ejecute acciones en el contexto y finalmente aplique estas acciones al contexto.

Las coordenadas en el lienzo comienzan desde la esquina superior izquierda, el eje X se extiende hacia la derecha en la dirección horizontal (por píxeles) y el eje Y se extiende hacia abajo en la dirección vertical. El punto con las coordenadas de la esquina superior izquierda x = 0 e y-0 se llama origen.

Como la mayoría de los elementos HTML, el elemento lienzo también puede agregar bordes aplicando CSS, establecer márgenes internos, márgenes externos, etc., y algunos atributos CSS también pueden ser heredados por elementos en lienzo.

Corrección: en el sistema de dibujo, la declaración es transformación, se puede aplicar secuencialmente, combinada o modificada a voluntad cuando se aplica. Los resultados de cada operación de dibujo deben corregirse a través de la capa de corrección antes de que se muestre en el lienzo. Aunque esto agrega complejidad adicional, agrega características más potentes al sistema de dibujo, lo que puede admitir el procesamiento de imágenes en tiempo real como las herramientas actuales de edición de imágenes convencionales, por lo que es necesaria la complejidad de esta parte del contenido en la API.

Hay una sugerencia importante sobre el código reutilizable: en general, el dibujo debe comenzar desde el origen (0,0 puntos en el sistema de coordenadas), aplicar la transformación (escala, traducción, rotación, etc.) y luego modificar continuamente el código hasta que se logre el efecto deseado.

Función de ruta de contexto

(1) Moveto (x, y): no dibuja, simplemente mueva la posición actual a la nueva coordenada de destino (x, y);

(2) Lineto (x, y): no solo mueve la posición actual a la nueva coordenada objetivo (x, y), sino que también dibuja una línea recta entre las dos coordenadas.

(3) ClosePath (): El comportamiento de esta función es muy similar a Lineto. La única diferencia es que ClosepAHT usará automáticamente la coordenada inicial de la ruta como coordenada objetivo. ClosePath también informa a Canvas que la figura actualmente dibujada se ha cerrado o ha formado un área completamente cerrada, que es muy útil para futuros rellenos y golpes.

(4) Strokerect (): dibuje el esquema del rectángulo según la posición y las coordenadas dadas.

(5) ClearRect (): Borre todo el contenido en el área del rectángulo y lo restaure a su estado inicial, es decir, color transparente.

(6) QuadraticCurveto (): el punto de partida de la función que dibuja una curva es la coordenada actual, con dos conjuntos de bordes (x, y). El segundo grupo se refiere al punto final de la curva. El primer grupo representa los puntos de control. El llamado punto de control se encuentra al lado de la curva (no por encima de la curva), y su efecto es equivalente a crear una fuerza de tensión en la curva. Al ajustar la posición del punto de control, se puede cambiar la curvatura de la curva.

Las imágenes aumentan la complejidad de las operaciones de lienzo: debe esperar hasta que la imagen esté completamente cargada antes de que pueda operarse. Los navegadores generalmente cargan imágenes de forma asincrónica mientras se ejecuta el script de la página. Si la vista produce la imagen en el lienzo antes de que esté completamente cargada, el lienzo no mostrará ninguna imagen.

El gradiente se refiere al uso de algoritmos de muestreo paso a paso en conjuntos de colores y aplicar los resultados a los estilos de carrera y los estilos de llenado.

El uso de gradientes requiere tres pasos:

(1) crear un objeto de gradiente;

(2) establecer color para objetos de gradiente e indique el método de transición;

(3) Establezca gradientes para estilos de relleno o estilos de trazo en el contexto.

Para establecer qué color mostrar, use la función addColorStop en el objeto de gradiente. Esta función permite especificar dos parámetros: color y desplazamiento. Los parámetros de color son los colores que los desarrolladores quieren usar cuando están acariciados o llenos en posiciones de compensación. El desplazamiento es un valor entre 0.0 y 1.0, lo que representa hasta qué punto la distancia está cambiar a lo largo de la línea de gradiente.

Además de los gradientes lineales, la API de lienzo HTML5 también admite gradientes radiactivos. El llamado gradiente radiactivo significa que el color cambia suavemente en el área cónica entre dos círculos especificados. Los puntos de terminación de color utilizados para gradientes radiactivos y gradientes lineales son los mismos.