Ejemplo de dibujo en lienzo con efecto de bola flotante.

Recientemente, estuve prestando atención a la información de blockchain, deambulando y accidentalmente vi el efecto de la página de inicio de este sitio web. Cuando la bola está cerca, habrá una línea de detección conectada a ella. El mouse también puede crear una línea de detección con la pelota. Mirar Lo siguiente se hace usando lienzo.

efecto original

lograr efecto

He tenido mucho contacto con svg antes y sé que el lienzo también puede lograr efectos de renderizado muy poderosos, pero nunca ha habido escenarios de uso que me hayan dado la oportunidad de comenzar, así que esta vez planeo probarlo yo mismo. .

Además, la razón por la que estoy interesado en esto es que me gustan los efectos visuales y la otra es que me gusta la sensación de simular el mundo físico como un motor de juego. Imagínense que estas bolas chocarán entre sí. , o tener repulsión gravitacional entre sí, o aumentar el factor de gravedad. Esta animación también puede abrir mucha imaginación.

Vea el repositorio de github aquí.

Las instrucciones de dibujo de Canvas son muy similares a las instrucciones en SVG, muy simples.

 ctx.beginPath();ctx.arc(this.center.x, this.center.y, this.radius, 0, 2 * Math.PI);ctx.fill();

BeginPath inicia un camino, el arco dibuja un círculo y lo llena de color.

 ctx.beginPath();ctx.moveTo(from.x, from.y);ctx.lineTo(to.x, to.y);ctx.stroke();

De manera similar, comenzarPath inicia un trazado, moveTo mueve el pincel al punto inicial, lineTo dibuja la línea hasta el punto final y traza trazos.

Para mantener el lienzo en pantalla completa, simplemente restablezca el ancho y el alto del lienzo cuando la ventana se cargue o cambie de tamaño.

 var lienzo = document.getElementById(canvas); función resizeCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight;}window.onload = window.onresize = resizeCanvas;

Las animaciones básicas me ayudan a empezar.

Cuatro pasos para crear animación:

1. Borre el contenido del lienzo, generalmente usando clearRect()
2. Guardar estado del lienzo
3. Dibujar contenido
4. Restablecer el estado del lienzo

Lo que hice es relativamente simple, solo usé 1 y 3, que es limpiar constantemente el lienzo y luego volver a dibujarlo.

 window.onload = function () { resizeCanvas(); window.requestAnimationFrame(draw);};function cleanCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height);}function draw() { cleanCanvas (); // dibujar cosas. window.requestAnimationFrame(draw);}

Hay tres disponibles:

1. window.setInterval() Si no hay ninguna necesidad de interacción del usuario y solo se vuelve a dibujar constantemente, esto es suficiente.
2. window.setTimeout() Si desea que las operaciones del usuario, como el teclado y el mouse, afecten la animación, puede usar esto (no lo entiendo, ¿no es mejor requestAnimationFrame?)
3. window.requestAnimationFrame() le dice al navegador qué hacer antes de volver a dibujar la próxima vez, es decir, su propia operación de dibujo personalizada.

Este ejemplo en MDN es bastante bueno. Se puede mover y la siguiente es solo una captura de pantalla.

He visto algo de desarrollo de motores de juegos antes y conscientemente hice una encapsulación orientada a objetos. Lo que se usa aquí es muy simple.

Lo más básico es que Vector representa un punto/vector en un espacio bidimensional, y sus miembros son solo xey.

Sobre esta base, Círculo representa un círculo, centro del miembro: Vector representa el centro del círculo, radio: el número representa el radio y velocidad: Vector representa la velocidad.

Luego, simplemente encapsule algunas funciones miembro para su propio uso.

TypeScript + Webpack + Webpack-dev-server no es complicado, solo consulte el siguiente contenido:

1. Paquete web/Comenzando
2. Paquete web/mecanografiado
3. Paquete web/servidor dev
4. servidor-dev-webpack

Además, también probé npx, que se utiliza para ejecutar programas ejecutables de npm. En el pasado, webpack se instalaba globalmente y podías llamar a webpack xx directamente. Si instalas webpack localmente, debes pasar por ./node_modules/. .bin/webpack Para ejecutar el paquete web local, ahora puede npx webpack xxx.

En la configuración de devServer, agregué hot: true para habilitar la actualización en caliente. Como resultado, la página web mostró: [HMR] Reemplazo de módulo en caliente está deshabilitado.

Descubrí que es un viejo error. Cuando necesito llamarlo, agregue los parámetros de la línea de comando: webpack-dev-server --hot --inline.

Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.