No se puede dibujar directamente en Convas, y debe obtenerse utilizando este método.
Próximo.
☆ context.beginPath ()Indica el comienzo de un nuevo dibujo de ruta.
☆ context.ispointInpath (x, y)Determinar si un punto está en el camino. Este método no se aplica después de convertir el sistema de coordenadas.
☆ context.moveto (x, y)Es equivalente a levantar el cepillo de la tabla de dibujo, dejar la tabla de dibujo y luego colocar la punta en el
En las coordenadas (x, y), comience un nuevo dibujo en esta nueva posición.
☆ context.lineto (x, y)Es equivalente a la punta del pincel que no sale de la tabla de dibujo, y la punta del pincel se mueve de la posición de coordenada actual a
Dibuja un segmento de línea en las coordenadas (x, y).
☆ context.stroke ()Después de dibujar en Convas, algunas operaciones de dibujo deben llamar a este método para permitir que el dibujo esté dentro
Visualización de contenido.
☆ context.save ()Este método guarda el estado actual de las Convas, independientemente de cualquier cambio en las Convas en el futuro.
Simplemente guarde el estado de Convas antes de hacer estos cambios y puede llamarlo más tarde
El método context.restore () se restaura al estado guardado. Generalmente dibujado en una nueva sección
o el estado original de las convas se debe guardar antes de modificar la operación (no se realiza ningún dibujo o cambio
), restaurarlo a su estado original después de completar una nueva operación de sorteo o modificación. este
También es propicio para futuras operaciones de dibujo.
De hecho, el contexto del entorno de dibujo 2D de Canvas tiene muchas propiedades y algunos métodos con
relacionado con el estado, se cambia el valor de cada atributo (o se utiliza algún método para cambiar el estado de dibujo),
El estado de dibujo cambia. Si se guarda después de cada cambio, múltiples estados de una propiedad
Guárdelo en forma de pila, y la parte restauración () se puede llamar varias veces en el orden de la pila.
volver al estado guardado correspondiente.
☆ context.traduciar (x, y)Este método mueve el origen de la coordenada actual a (x, y).
☆ context.restore ()Restaurar el estado de Convas al último estado salvado.
☆ context.ClosePath ()Este comando es muy similar en comportamiento al lineto
función, con la diferencia es que el destino es
asumido automáticamente es el
Originación del camino. Sin embargo, el Cloinepath también informa
el lienzo que la forma actual ha cerrado o formado un
área completamente contenida. Esto será útil para el futuro
rellenos y golpes.
En este punto, eres libre de continuar con más
segmentos en su camino para crear subpath adicionales. O tu
puede comenzar en cualquier momento para comenzar de nuevo y despejar el camino
lista por completo.
☆ context.fill ();Llene la ruta cerrada después de configurar el estilo de relleno. No es necesario llamar a este método después de llamarlo
Método context.stroke ().
☆ context.fillrect (x, y, ancho, altura)Dibuje y llene el área rectangular con ancho y longitud (ancho, altura) en (x, y). Ajustar
Después de usar este método, no necesita llamar al método context.stroke () nuevamente.
☆ context.strokerect (x, y, ancho, altura)Dibuje un contorno rectangular con ancho y longitud (ancho, altura) en (x, y).
☆ context.Learrect (x, y, ancho, altura)La posición de limpieza (la esquina superior izquierda del rectángulo) está en (x, y), y el tamaño es (ancho, altura)
Área rectangular.
Eliminar cualquier contenido del área rectangular y restablecerlo
a su color original transparente.
La capacidad de despejar rectángulos en el lienzo es el núcleo de
Creación de animaciones y juegos utilizando la API de lienzo HTML5. Por
Dibujo y compensación repetidamente de secciones del lienzo,
es posible presentar la ilusión de la animación, y muchos
Ejemplos de esto ya existen en la web. Sin embargo, a
Crea animaciones que funcionen sin problemas, necesitarás
utilizar características de recorte y tal vez incluso una secundaria
lienzo tamponado para minimizar el parpadeo causado por
El lienzo frecuentemente se borra.
☆ context.drawImage ()Este método tiene tres sobrecargas para dibujar la imagen en el lienzo. La fuente de imagen puede ser
Un marco de la etiqueta IMG en la página, el objeto de imagen en JS y Video.
• context.drawimage (img, x, y)
Dibuja la imagen con la imagen img en (x, y). Cuando el tamaño del lienzo es más grande que la imagen
, se dibuja toda la imagen; Cuando la imagen es más grande que el lienzo, el exceso se recorta.
• context.drawimage (img, x, y, w, h)
En (x, y), use Image IMG para dibujar un área rectangular con longitud y ancho (W, H). imagen
El tamaño del secuencial cambiará a (W, H).
• context.drawimage (img, imgx, imgy, imgw, imgh, cx, cy,
CW, CH)
Tome una imagen IMG como un objeto de dibujo, y la posición en el IMG es (IMGX, IMGY
) El área con tamaño (IMGW, IMGH) se dibuja en la posición de lienzo (CX, CY)
Dibuja el área de tamaño (CW, CH).
Se lanza una excepción si el área de cultivo en la imagen está fuera del rango de imagen.
• context.DrawImage (Video, VX, VY, VW, VH, CX, CY, CW, CH)
Tome un objeto de video como objeto de dibujo y tome la posición en el video como (VX, VY
) Un marco con tamaño (VW, VH), se basa en la posición en lienzo (CX, CY)
Áreas con pequeñas (CW, CH).
Además, el primer parámetro de DrawImage () también puede ser otro lienzo.
☆ context.getImagedata (x, y, ancho, altura)Este método obtiene el tamaño (ancho, altura) de la posición dentro del lienzo (x, y)
Un área de píxeles, el valor de retorno es un objeto imagedata. Imagedata tiene ancho,
altura y datos.
El atributo de datos es una variedad de píxeles, y cada cuatro elementos consecutivos en la matriz representan una imagen
, cuatro elementos consecutivos contienen información de color y transparencia RGBA a su vez. Cuatro elementos consecutivos
El píxel debe pertenecer a un píxel, y la posición del primer elemento no se toma a voluntad.
La matriz de píxeles se especifica en el orden de lienzo de arriba a abajo y de izquierda a derecha.
Escanear para obtener. El número de elementos en la matriz de píxeles es el ancho * altura * 4. Para obtener un específico
Información de píxeles de la ubicación.
Si abre la página web utilizando este método en un modo de archivo local, no será normal
Trabajando, generalmente ocurren errores de seguridad. Puede cargar archivos a
El servidor web luego solicita acceso para resolver este problema. Y, las imágenes involucradas, JS y
El HTML debe ser del mismo nombre de dominio. Sin embargo, se puede acceder a IE9 a través de archivos locales.
Un ejemplo es el siguiente:
Copiar el código