Este artículo presenta principalmente el método simple de usar el lienzo HTML5 para dibujar curvas. Es el conocimiento básico en la introducción a HTML5. Los amigos que lo necesitan pueden referirse a él.
El método de curva de Canvas2D
Recientemente, estoy estudiando el cálculo de los cuerpos blandos 3D, por lo que estoy agregando algunos conocimientos. A menudo implica un análisis numérico, principalmente varios algoritmos de interpolación para curvas. De repente recordé que el Canvas2D también puede dibujar curvas, utilizando curvas cuadráticas y de cubo Baz. En realidad, todavía no he usado este método, probémonos ahora ~
Este artículo se trata solo de dibujo de curva simple, así que no hablemos de muchos principios complejos. Además, el principio de la curva Baz en sí es muy simple, puedes entenderlo mirando a Wikipedia. De hecho, muchas herramientas de dibujo de curvas simples usan curvas BAZ. Si ha utilizado las curvas en las propias herramientas de dibujo de Windows, debe estar familiarizado con ellas. Primero puede arrastrar una línea recta y luego hacer clic en una determinada posición para hacer que la línea recta gire. La acción de arrastre inicial determina los dos vértices de la curva, y la acción de clic agrega el punto intermedio. La herramienta de dibujo que viene con Windows usa curvas cúbicas de Baz, y puede agregar dos puntos intermedios. La curva Bate es diferente de la interpolación polinomial general. Su punto intermedio solo se usa como punto de control, no como el vértice que la curva debe pasar. Y también puede hacer curvas cerradas. Canvas2D proporciona dos métodos para dibujar curvas
QuadraticCurveto: curva de Baze cuadrática
Beziercurveto: curva de bisel cúbico
La línea se extrae de la posición actual, y la posición actual puede especificarse mediante el método Moveto. Con la posición inicial de la curva, también se necesitan el punto intermedio y la posición final. Simplemente pase estas coordenadas de posición a la función de dibujo. Por ejemplo, una curva de Batez cuadrática requiere un punto intermedio y una posición final, por lo que se deben pasar dos coordenadas a la función QuadraticCurveto. Las coordenadas están compuestas de x e y, lo que significa que esta función tiene 4 parámetros. Beziercurveto es el mismo, excepto que tiene dos puntos intermedios. Usémoslo ahora
CODE CODE CSS Copiar contenido al portapapeles