Lienzo --- descripción general + ejemplo simple
Si entendemos Canvas de una manera popular, podemos entender que es similar a la herramienta de dibujo que viene con nuestra computadora. Canvas primero selecciona un lienzo, luego representa lo que queremos dibujar en este lienzo y lo muestra a los usuarios después de dibujar .
Por supuesto, no solo puede dibujar imágenes dinámicas, sino incluso dibujar efectos 3D.
1. Descripción del lienzo
1. ¿Qué es el lienzo?
Canvas es una nueva etiqueta proporcionada por HTML5.
<canvas></canvas>
La etiqueta del lienzo es solo un contenedor de gráficos, equivalente a un lienzo, y el elemento del lienzo en sí no tiene capacidad de dibujo. Todo el trabajo de dibujo debe realizarse dentro de JavaScript, lo que equivale a usar un pincel para dibujar en el lienzo.
Canvas tiene múltiples métodos para dibujar trazados, rectángulos, círculos, caracteres y agregar imágenes.
2. Características del lienzo.
1. Interactividad : Canvas admite la interacción y puede responder bien a las operaciones del usuario. Podemos monitorear eventos relacionados con el teclado, el mouse y el dispositivo táctil a través de Javascript.
2. Animación : cualquier gráfico dibujado por el lienzo se puede animar, y se pueden implementar simples pelotas de rebote o juegos HTML5 complejos.
3. Flexibilidad : los desarrolladores pueden usar el lienzo para dibujar cualquier contenido, como líneas rectas, gráficos, texto, imágenes, etc., que puede incluir animación o no. Al mismo tiempo, puede agregar soporte de navegador de audio o video.
4. Popularidad : el lienzo es actualmente muy popular, y muchos desarrolladores lo usan para desarrollar juegos o aplicaciones de dibujo similares.
5.web estándar : solo necesita un navegador para ejecutarse, en lugar de flash o silverlight, necesita instalar complementos relacionados.
3. Campo de aplicación del lienzo
1. Datos visualizados : varios cuadros estadísticos, como el echart de Baidu
2. Escena : el uso del lienzo para lograr efectos publicitarios dinámicos puede ejecutarse de manera muy armoniosa en todas las plataformas. Tales como: microproductos para teléfonos móviles. La compatibilidad móvil es muy buena.
3. Juegos : el lienzo es más tridimensional y más compacto que Flash en la visualización de imágenes basadas en la web, y el lienzo se ha convertido en la primera opción para el desarrollo de juegos HTML5.
4. Otro contenido que se puede incrustar en el sitio web (utilizado principalmente para páginas activas, efectos especiales) : como gráficos, audio, video y muchos otros elementos se pueden integrar mejor con la Web, y no requiere ningún complemento.
5. Tendencia => Simulador : ya sea en términos de efectos visuales o funciones básicas, el producto del simulador se puede implementar completamente mediante JavaScript. Simule un entorno de hardware real, como varios tipos de teléfonos móviles.
6. Tendencia => Control remoto de la computadora : Canvas permite a los desarrolladores implementar mejor la transmisión de datos basada en la Web y construir una interfaz de control visual perfecta.
7. Tendencia => Editor gráfico : el editor gráfico de Photoshop estará 100% basado en la web.
2. Conceptos básicos del dibujo en lienzo.
1. Dibuja el lienzo
<body>
<!--1.准备画布 画布默认白色的 默认长宽300*150-->
<!--1.1 设置画布的大小 width="600" height="400" -->
<canvas width="600" height="400" ></canvas>
<!--2.准备绘制工具-->
<script>
/*1.获取元素*/
var myCanvas = document.querySelector('canvas');
/*2.获取上下文 绘制工具箱 2d代表是2d效果 3d就是指3d效果 3d只有IE11才支持*/
var ctx = myCanvas.getContext('2d');
</script>
</body>
El contexto es un objeto que encapsula muchas funciones de dibujo. Después de crear una etiqueta de lienzo en la página, primero debemos usar getContext () para obtener el contexto del lienzo. El objeto getContext ("2d") está dentro
El objeto HTML5 construido tiene una variedad de formas de dibujar trazados, rectángulos, círculos, caracteres y agregar imágenes.
El código anterior obtenemos contexto 2D a través del lienzo. En la estructura 2D de HTML5 Canvas, las coordenadas (0,0) están en la esquina superior izquierda, lo que no es lo mismo que las coordenadas tradicionales. Todos deben prestar atención, como se muestra en la siguiente figura:
2. Dibuja el camino básico
1), dibujar el punto de partida (moveTo)
* 语法：ctx.moveTo(x, y);
* 解释：设置上下文绘制路径的起点。相当于移动画笔到某个位置
* 参数：x,y 都是相对于 canvas盒子的最左上角。
* 注意：**绘制线段前必须先设置起点，不然绘制无效。**
2), dibuja una línea recta (lineTo)
* 语法：ctx.lineTo(x, y);
* 解释：从x,y的位置绘制一条直线到起点或者上一个线头点。
* 参数：x,y 线头点坐标。
3), inicio y cierre de ruta
* 开始路径：ctx.beginPath();
* 闭合路径：ctx.closePath();
* 解释：如果复杂路径绘制，必须使用路径开始和结束。闭合路径会自动把最后的线头和开始的线头连在一起。
* beginPath: 核心的作用是将 不同绘制的形状进行隔离，
每次执行此方法，表示重新绘制一个路径,跟之前的绘制的墨迹可以进行分开样式设置和管理。
4) accidente cerebrovascular
* 语法：ctx.stroke();
* 解释：根据路径绘制线。路径只是草稿，真正绘制线必须执行stroke
5) Resuma
los pasos básicos del dibujo en lienzo:
第一步：获得上下文 =>canvasElem.getContext('2d');
第二步：开始路径规划 =>ctx.beginPath()
第三步：移动起始点 =>ctx.moveTo(x, y)
第四步：绘制线(矩形、圆形、图片...) =>ctx.lineTo(x, y)
第五步：闭合路径 =>ctx.closePath();
第六步：绘制描边 =>ctx.stroke();
Tres, ejemplo de línea de dibujo
1. Dibuja una línea
Código
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
canvas{ border: 2px solid #00CED1; }
</style>
</head>
<body>
<canvas width="300" height="200" ></canvas>
<script>
/*1.获取元素*/
var myCanvas = document.querySelector('canvas');
/*2.获取上下文 绘制工具箱 */
var ctx = myCanvas.getContext('2d');
/*3.移动画笔*/
ctx.moveTo(100,100);
/*4.绘制直线 (轨迹，绘制路径)*/
ctx.lineTo(200,100);
/*5.描边*/
ctx.stroke();
</script>
</body>
</html>
Efecto corriente
2. Dibuja líneas paralelas
Código
/*上面代码部分省略*/
/*第一条线*/
ctx.moveTo(100,100);
ctx.lineTo(200,100);
/*第二条线*/
ctx.moveTo(100,150);
ctx.lineTo(200,150);
/*描边*/
ctx.stroke();
Resultado de la operación
3. Dibuja un triángulo
Código
/*1.绘制一个三角形*/
ctx.moveTo(100,100);
//第一条线
ctx.lineTo(150,100);
//第二条线
ctx.lineTo(150,150);
/*第三条线使用canvas的自动闭合 */
ctx.closePath();
//修改宽度
ctx.lineWidth = 5;
/*2.描边*/
ctx.stroke();
Resultado de la operación
4. Dibuja un cuadrado
Código
/*1.绘制两个正方形 一大200一小100 套在一起*/
ctx.moveTo(100,100);
ctx.lineTo(300,100);
ctx.lineTo(300,300);
ctx.lineTo(100,300);
ctx.closePath();
//第二个正方形
ctx.moveTo(150,150);
ctx.lineTo(150,250);
ctx.lineTo(250,250);
ctx.lineTo(250,150);
ctx.closePath();
/*2.去填充*/
//ctx.stroke();
ctx.fillStyle = 'red';
ctx.fill();
Resultado de la operación
重点: Siga al completar lo anterior 非零环绕规则, esta oración es muy comprensible de entender, no es muy fácil de explicar, puede consultar este artículo Tutorial de lienzo (21) principio de ajuste no cero
5. Establecer el estilo
Aquí hay algunos métodos comúnmente utilizados para establecer el estilo, sin ejemplos específicos.
- lineWidth 线宽，默认1px
- lineCap 线末端类型：(butt默认)、round、square
- lineJoin 相交线的拐点 miter(默认)、round、bevel
- strokeStyle 线的颜色
- fillStyle 填充颜色
- setLineDash() 设置虚线
- getLineDash() 获取虚线宽度集合
- lineDashOffset 设置虚线偏移量（负值向右偏移）
Referencia
1. Descripción general del lienzo
别人骂我胖，我会生气，因为我心里承认了我胖。别人说我矮，我就会觉得好笑，因为我心里知道我不可能矮。这就是我们为什么会对别人的攻击生气。
攻我盾者，乃我内心之矛(9)
)。