Sobre el uso de Canvas (explicación súper detallada del sistema de conocimiento de Canvas)

1. Sobre el lienzo

1.1 Introducción

1.1.1 es nuevo en HTML5, un elemento HTML que puede dibujar imágenes usando scripts (generalmente JavaScript). Se puede utilizar para crear álbumes de fotos o animaciones simples (no tan simples), e incluso procesar y renderizar videos en tiempo real.

1.1.2 Fue introducido originalmente por Apple internamente usando su propio MacOS X WebKit para aplicaciones que usan widgets como Dashboard y el navegador Safari. Posteriormente, se propuso utilizar este elemento para la próxima generación de tecnologías web a través de navegadores basados ​​en Gecko (especialmente Mozilla y Firefox), Opera y Chrome, y el Grupo de Trabajo de Tecnología de Aplicaciones Web de Hipertexto.

1.1.3 Canvas es un área dibujable definida por código HTML con atributos de alto y ancho. El código JavaScript puede acceder a esta área, de manera similar a otras API 2D comunes, a través de un conjunto completo de funciones de dibujo para generar gráficos dinámicamente.

1.2 Precauciones

1.2.1 el lienzo es una etiqueta doble

1.2.2 Si no configura las propiedades de ancho y alto, el ancho predeterminado es 300 y el alto es 150, y la unidad es px. También puede usar las propiedades CSS para establecer el ancho y el alto, pero si las propiedades de ancho y alto no son consistentes con la proporción inicial, se distorsionará. Por lo tanto, se recomienda nunca utilizar propiedades CSS para establecer el ancho y el alto.

1.2.3 Debido a que algunos navegadores más antiguos (especialmente los navegadores IE anteriores a IE9) o navegadores no admiten elementos HTML, solo se puede mostrar contenido alternativo en estos navegadores.

2. Uso básico del lienzo

2.1 Contexto de renderizado

if(!canvas.getContext) retorno;

2.2 Soporte de detección

if(!canvas.getContext) retorno;

2.3 Plantillas de código

<canvas id="tutorial" width="300" height="300"></canvas>
<script type="text/javascript">
function draw(){
    
    
	var canvas = document.getElementById('tutorial');
	if(!canvas.getContext) return;
	if(!canvas.getContext) return;
	ctx.fillStyle = "rgb(200,0,0)";
	//绘制矩形
	ctx.fillRect (10, 10, 55, 50);

	ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
	ctx.fillRect (30, 30, 55, 50);
}
draw();
</script>

3. Dibujo gráfico

3.1 Resumen de métodos

3.1.1 fillRect(x, y, ancho, alto): dibuja un rectángulo relleno

Descripción del parámetro: x, y: se refieren a las coordenadas de la esquina superior izquierda del rectángulo. (en relación con el origen de coordenadas del lienzo)

3.1.2 trazoRect(x, y, ancho, alto): dibuja un borde de rectángulo.

Mismos parámetros que arriba

3.1.3 clearRect(x, y, ancho, alto): borre el área rectangular especificada y luego esta área se volverá completamente transparente.

Mismos parámetros que arriba

4. Dibujo de ruta

4.1 Pasos básicos

4.1.1 Crear el punto de partida del camino

4.1.2 Llame al método de dibujo para dibujar el camino

4.1.3 Cerrando el camino

4.1.4 Una vez generado el trazado, renderice la forma acariciando o rellenando el área del trazado.

4.2 Resumen del método

4.2.1. comenzar ruta()

Cree una nueva ruta. Una vez que la ruta se haya creado correctamente, el comando de dibujo de gráficos se dirigirá a la ruta para generar la ruta.

4.2.2. mover a (x, y)

Mueva el pincel a las coordenadas especificadas (x, y). Equivale a establecer las coordenadas del punto inicial del camino.

4.2.3. cerrar ruta()

Después de cerrar la ruta, los comandos de dibujo de gráficos se redirigen al contexto.

4.2.4. ataque()

Dibuja el contorno de la figura a través de la línea.

4.2.5. llenar()

Genera una forma sólida llenando el área de contenido de un camino

4.2.6. lineTo(x,y)

Dibuja una línea desde la posición actual hasta las coordenadas especificadas (x,y).

4.2.7. arc(x, y, r, startAngle, endAngle, en sentido antihorario)

Tome (x, y) como centro y r como radio, comenzando desde radianes de ángulo inicial hasta radianes de ángulo final. anticlosewise es un valor booleano, verdadero significa en sentido contrario a las agujas del reloj, falso significa en el sentido de las agujas del reloj (el valor predeterminado es en el sentido de las agujas del reloj).

4.2.8. arcoA(x1, y1, x2, y2, radio)

Dibuje un arco de acuerdo con el punto de control y el radio dados, y finalmente conecte los dos puntos de control con una línea recta, el radio identifica el
ejemplo del radio:

4.3 Curva de Bézier

4.3.1 Una curva de Bézier es en realidad una línea recta

4.3.2 Curva de Bézier cuadrática

quadraticCurveTo(cp1x, cp1y, x, y)
descripción del parámetro: Parámetros 1 y 2: coordenadas del punto de control, parámetros 3 y 4: coordenadas del punto final
Diagrama de ejemplo:

4.3.3 Curva de Bézier cúbica

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
descripción del parámetro: Parámetros 1 y 2: coordenadas del punto de control 1, parámetros 3 y 4: coordenadas del punto de control 2, parámetros 5 y 6: coordenadas del punto final
:

5. Estilo y color

5.1 Método básico

5.1.1 fillStyle = color Establece el color de relleno de los gráficos

El color puede ser una cadena de valores de color CSS, un objeto de degradado o un objeto de patrón.

5.1.2 StrokeStyle = color Establece el color del contorno gráfico

5.1.3 Transparencia globalAlfa = valortransparencia

Esta propiedad afecta la transparencia de todos los gráficos en el lienzo. Los valores válidos oscilan entre 0,0 (completamente transparente) y 1,0 (completamente opaco). El valor predeterminado es 1,0.

5.1.4. ancho de línea=1

ancho de línea. Sólo pueden ser valores positivos. El valor predeterminado es 1.0.
La línea que conecta el punto inicial y el punto final es el centro, y los lados superior e inferior representan cada uno la mitad del ancho de la línea.

5.1.5. lineCap = tipo

tope: el final del segmento de línea termina con un
cuadrado redondo: el final del segmento de línea termina con un círculo cuadrado
: el final del segmento de línea termina con una forma cuadrada, pero un área rectangular con el mismo ancho que el segmento de línea y se agrega la mitad del grosor del segmento de línea.
ejemplos:

5.1.6. líneaUnir = tipo

round Dibuja la forma de la esquina llenando un sector adicional cuyo centro está al final de la parte conectada. El radio del filete es el ancho del segmento de línea.
El bisel rellena un área adicional basada en un triángulo al final de las partes conectadas, cada una con su propia esquina rectangular independiente.
inglete (predeterminado) forma una región adicional en forma de diamante al extender los bordes exteriores de las piezas conectadas para que se unan en un punto.
ejemplos:

5.2 Líneas de puntos

5.2.1 Método setLineDash()

Acepta una matriz para especificar la alternancia de segmentos de línea y espacios (por ejemplo, ctx.setLineDash([20, 5]))

5.2.2 Propiedad lineDashOffset

Establezca el desplazamiento inicial (por ejemplo, ctx.lineDashOffset = -1)

5.2.3 getLineDash() Devuelve una matriz que contiene el estilo de línea discontinua actual, cuya longitud es un número par no negativo

6. Dibujo de texto

6.1 Método básico

6.1.1. fillText(texto, x, y [, maxWidth])

Rellena el texto especificado en la posición (x,y) especificada, con un ancho máximo opcional dibujado.

6.1.2. trazoText(texto, x, y [, maxWidth])

Dibuja un borde de texto en la posición especificada (x,y), con un ancho máximo opcional.

6.2 Estilos de texto

6.2.1. fuente = valor

El estilo actual que utilizamos para dibujar el texto. Esta cadena utiliza la misma sintaxis que la propiedad de fuente CSS. La fuente predeterminada es sans-serif de 10px.

6.2.2. alineación de texto = valor

Opciones de alineación de texto. Los valores posibles incluyen: inicio, fin, izquierda, derecha o centro. El valor predeterminado es inicio.

6.2.3. línea base de texto = valor

Opción de alineación de línea base, los valores opcionales incluyen: superior, colgante, medio, alfabético, ideográfico, inferior. El valor predeterminado es alfabético.

6.2.4. dirección = valor

dirección del texto. Los valores posibles incluyen: ltr, rtl, heredar. El valor predeterminado es heredar.

7. dibujo de imagen

7.1 Nota

Teniendo en cuenta que la imagen se carga desde la red, si la imagen no está completamente cargada cuando se ejecuta drawImage, no se hará nada y algunos navegadores generarán una excepción. Así que debemos asegurarnos de dibujar la imagen después de dibujar la img.

7.2 Plantillas de métodos de dibujo

<img  src="图片路径" alt="" width="300"><br>
<canvas id="tutorial" width="600" height="400"></canvas>
function draw(){
    
    
	var canvas = document.getElementById('tutorial');
	if (!canvas.getContext) return;
	var ctx = canvas.getContext("2d");
	var img = document.querySelector("img");
	ctx.drawImage(img, 0, 0);
}

7.3 Explicación detallada del método drawImage()

7.3.1 Dibujo básico: drawImage(img,x,y)

Parámetro 1: la imagen que se dibujará Parámetro 2, 3: las coordenadas de la imagen dibujada en el lienzo

7.3.2 Escalado de imagen: drawImage(imagen, x, y, ancho, alto)

Ancho y alto, estos dos parámetros se utilizan para controlar el tamaño que se debe escalar cuando se dibuja el lienzo.

7.3.3. Ejemplo: drawImage (imagen, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

El primer parámetro es el mismo que los demás, que son referencias a una imagen u otro lienzo; 2-5 son para definir la posición del corte y el tamaño de la imagen fuente, y 6-9 son para definir la posición de visualización de destino y el tamaño de los
ejemplos de rebanadas:

8. Ahorro y restauración del estado.

8.1 Descripción

Guardar y restaurar el estado es una operación necesaria para dibujar gráficos complejos. En pocas palabras, consiste en dibujar un gráfico y guardarlo, y luego continuar dibujando en el gráfico guardado hasta que se complete un gráfico de destino.

8.2 método guardar()

El estado del Canvas se almacena en la pila y cada vez que se llama al método save(), el estado actual se envía a la pila para guardarlo.

8.3. restaurar()

Cada vez que se llama al método de restauración, el último estado guardado se extrae de la pila y se restauran todas las configuraciones (similar a pop() de una matriz).

8.4 Un ejemplo

function draw(){
    
    
	var canvas = document.getElementById('tutorial');
	if (!canvas.getContext) return;
	var ctx = canvas.getContext("2d");

	ctx.fillRect(0, 0, 150, 150);   // 使用默认设置绘制一个矩形
	ctx.save();                  // 保存默认状态

	ctx.fillStyle = 'red'       // 在原有配置基础上对颜色做改变
	ctx.fillRect(15, 15, 120, 120); // 使用新的设置绘制一个矩形

	ctx.save();                  // 保存当前状态
	ctx.fillStyle = '#FFF'       // 再次改变颜色配置
	ctx.fillRect(30, 30, 90, 90);   // 使用新的配置绘制一个矩形

	ctx.restore();               // 重新加载之前的颜色状态
	ctx.fillRect(45, 45, 60, 60);   // 使用上一次的配置绘制一个矩形

	ctx.restore();               // 加载默认颜色配置
	ctx.fillRect(60, 60, 30, 30);   // 使用加载的配置绘制一个矩形
}
draw();

ejemplos:

9. Síntesis

9.1 Descripción

Mediante el guardado y la restauración del estado, un gráfico complejo se puede superponer continuamente a otro gráfico, pero esto está lejos de ser suficiente. A veces es necesario limitar el orden del dibujo, lo que se puede lograr componiendo

9.2 Método: globalCompositeOperation = tipo

9.2.1 De forma predeterminada, la nueva imagen sobrescribe la imagen anterior

ejemplos:

9.2.2.source-in solo mostrará la parte superpuesta de la nueva imagen y la imagen original, y otras áreas se volverán transparentes. (incluidas otras áreas de imágenes antiguas también serán transparentes)

ejemplos:

9.2.3 Fuente de salida Solo muestra la parte de la nueva imagen que no se superpone con la imagen anterior, y el resto de la imagen es transparente. (Las imágenes antiguas tampoco se muestran)

ejemplos:

9.2.4 source-atop La nueva imagen solo muestra el área que se superpone con la imagen anterior. Aún se pueden mostrar imágenes antiguas.

ejemplos:

9.2.5. El destino sobre la nueva imagen estará debajo de la imagen anterior.

ejemplos:

9.2.6 destino-en Solo se muestra la imagen antigua en la parte superpuesta de las imágenes nueva y antigua, y las demás áreas son todas transparentes.

ejemplos:

9.2.7 destino-fuera Sólo las partes de la imagen antigua que no se superponen con la nueva imagen. Tenga en cuenta que se muestran algunas áreas de la imagen anterior.

ejemplos:

9.2.8 destino encima La imagen anterior solo muestra la parte superpuesta y la nueva imagen se mostrará debajo de la imagen anterior

ejemplos:

9.2.9 Más claro Se muestran tanto las imágenes antiguas como las nuevas, pero se procesa el color del área superpuesta.

ejemplos:

9.2.10 oscurecer Mantenga el píxel más oscuro en la superposición. (cada bit de color se compara para obtener el más pequeño)

ejemplos:

9.2.11 aclarar Garantiza el máximo número de píxeles en la superposición. (Se compara cada bit de color, se obtiene el más grande)

ejemplos:

9.2.12.x o las partes superpuestas se volverán transparentes.

ejemplos:

9.2.13 copiar Sólo se conservará la nueva imagen, el resto se borrará (transparente).

ejemplos:

10. Deformación

10.1 Resumen del método (básicamente el mismo que css3)

10.1.1. traducir(x,y)

Se utiliza para mover el origen del lienzo a la posición especificada, x es el desplazamiento hacia la izquierda y hacia la derecha, y es el desplazamiento hacia arriba y hacia abajo. Es
un buen hábito guardar el estado antes de realizar la deformación. En la mayoría de los casos, llamar al método de restauración es mucho más sencillo que restaurar manualmente el estado anterior. Y si estás haciendo un desplazamiento en bucle sin guardar y restaurar el estado del lienzo, es muy probable que al final encuentres que falta algo, porque es probable que haya excedido el alcance del lienzo.

10.1.2. rotar (ángulo)

ángulo: el ángulo de rotación, es en el sentido de las agujas del reloj, el valor en radianes, el centro de rotación es el origen de coordenadas

10.1.3. escala(x,y)

x, y son factores de escala para los ejes horizontal y vertical respectivamente, y ambos deben ser positivos

11. Animación

11.1 Pasos básicos

11.1.1 Vaciar el lienzo Antes de dibujar cada cuadro de animación, debes borrar todo. La forma más sencilla de borrar todo es el método clearRect().

11.1.2 Guardar el estado del lienzo Si el estado del lienzo (color, movimiento del origen de coordenadas, etc.) cambiará durante el proceso de dibujo y es el estado original al dibujar cada cuadro, es mejor para guardar el estado del lienzo

11.1.3 Dibujar gráficos de animación Este paso es el dibujo del cuadro de animación real.

11.1.4 Restaurar el estado del lienzo Si guardó el estado del lienzo anteriormente, debe restaurar el estado del lienzo después de dibujar un marco.

11.2 Métodos comunes

11.2.1. establecerintervalo()

11.2.2. establecerTiempo de espera()

11.2.3. solicitarMarcoAnimación()

11.3 Un caso pequeño y simple (efecto de lluvia de código dinámico)

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
      
      
	margin: 0;
	padding: 0;
	overflow: hidden;
}
</style>
</head>

<body>
	<canvas id="bg"></canvas>
<script>
	// 获取对象
	const cvs = document.getElementById("bg");
	// 设置canvas画布宽高
	const width = window.innerWidth;
	const height = window.innerHeight;
	cvs.width = width;
	cvs.height = height;
	// 返回一个用于在画布上绘图的环境
	const ctx = cvs.getContext("2d");
	// 定义每列的宽度
	const columnWidth = 20;
	// 生成的列数
	const columnCount = Math.floor(window.innerWidth / columnWidth)
	// 创建数组
	const columnNextIndexes = new Array(columnCount);
	// 全部用1填充
	columnNextIndexes.fill(1);
	// 绘画
	function draw() {
      
      
		// 背景颜色
		ctx.fillStyle = 'rgba(240,240,240,0.2)';
		// fillRect(x1, y1, width, width) 画图形
		ctx.fillRect(0, 0, width, height);
		// 设置颜色
		ctx.fillStyle = getRandomColor();
		const fz = 20;
		// 字体样式
		ctx.font = `${ 
        fz}px Calibri`;
		for (let i = 0; i < columnCount; i++) {
      
      
			// x坐标
			const x = i * columnWidth;
			// y坐标
			const y = fz * columnNextIndexes[i];
			// 填充内容
			ctx.fillText(getRandomChar(), x, y);
			// 判断是否超出可视范围
				if (y > height && Math.random() > 0.99) {
      
      
					columnNextIndexes[i] = 0;

				} else {
      
      
					columnNextIndexes[i]++
			}
		}
	}
	draw()
	setInterval(draw, 40)
	// 随机颜色
	function getRandomColor() {
      
      
		const fontColor = [
			"#33b5e5",
			"#0099cc",
			"#aa66cc",
			"#9933cc",
			"#669900",
			"#ffbb33",
			"#ff8800",
			"#ff4444",
			"#cc0000"
		]
		return fontColor[Math.floor(Math.random() * fontColor.length)]
	}
	// 随机字符
	function getRandomChar() {
      
      
		const str = "console.log('hello world')";
		return str[Math.floor(Math.random() * str.length)]
	}
</script>
</body>

</html>