Este artigo apresenta principalmente o método simples de usar a tela HTML5 para desenhar curvas. É o conhecimento básico na introdução ao HTML5. Amigos que precisam podem se referir a ele.
O próprio método de curva do Canvas2d
Recentemente, estou estudando o cálculo de corpos macios 3D, por isso estou adicionando algum conhecimento. Geralmente, envolve alguma análise numérica, principalmente vários algoritmos de interpolação para curvas. De repente, lembrei -me de que o próprio Canvas2D também pode desenhar curvas, usando curvas quadráticas e de cubo. Na verdade, ainda não usei esse método, vamos tentar agora ~
Este artigo é apenas um desenho de curvas simples, então não vamos falar sobre muitos princípios complexos. Além disso, o princípio da curva Baz em si é muito simples, você pode entendê -lo olhando para a Wikipedia. De fato, muitas ferramentas simples de desenho de curvas usam curvas BAZ. Se você usou as curvas nas ferramentas de desenho do Windows, deve estar familiarizado com elas. Você pode primeiro arrastar uma linha reta e depois clicar em uma determinada posição para fazer a reviravolta da linha reta. A ação de arrasto inicial determina os dois vértices da curva, e a ação de cliques adiciona o ponto intermediário. A ferramenta de desenho que vem com o Windows usa curvas de baz cúbicas e você pode adicionar dois pontos intermediários. A curva Bate é diferente da interpolação polinomial geral. Seu ponto intermediário é usado apenas como ponto de controle, não o vértice pelo qual a curva deve passar. E também pode fazer curvas fechadas. Canvas2d fornece dois métodos para desenhar curvas
quadraticcurveto: curva quadrática de baze
BezierCurveto: Curva Cúbica do Bavilhão
A linha é desenhada da posição atual e a posição atual pode ser especificada pelo método moveto. Com a posição inicial da curva, o ponto intermediário e a posição final também são necessários. Basta passar essas coordenadas de posição para a função de desenho. Por exemplo, uma curva quadrática de Batez requer um ponto intermediário e uma posição final, portanto, duas coordenadas precisam ser passadas para a função quadraticcurveto. As coordenadas são compostas de x e y, o que significa que essa função possui 4 parâmetros. BezierCurveto é o mesmo, exceto que possui dois pontos intermediários. Vamos usá -lo agora
CSS Code Copy Content para a área de transferência