Rapaz, eu realmente trabalhei duro para desenhar esse oval.
Em primeiro lugar, não existe uma função para desenhar elipses na tela da universidade. Existem muitas maneiras de realizar elipses.
- Você pode usar lineTo para alterar continuamente o pequeno espaçamento para desenhar, mas isso consome muito desempenho.
- Use arco para desenhar um círculo e escala para deformá-lo.
- Você pode usar arcTo, curva de Bezier, etc. para desenhar elipses. O principal é encontrar os pontos de controle, o que é relativamente problemático.
Então eu uso o segundo método, principalmente porque é relativamente simples, embora também tenha certas desvantagens, como sua posição se moverá ao aplicar zoom e a largura das linhas curvas desenhadas é inconsistente, mas é inofensivo.
O seguinte é o conteúdo principal deste artigo: A elipse está desenhada, mas o que devemos fazer se precisarmos incliná-la? Você precisa usar traduzir e girar. Os detalhes estão escritos no código.
// 可以参考下思路 主要还是跟据场景来定
drawSkimLine(ctx, x,y，radius) {
ctx.lineWidth = 2;
ctx.strokeStyle = "red";
ctx.beginPath();
ctx.translate(x,y) //将画布的原点定位到 椭圆的圆心
ctx.rotate(30 * Math.PI / 180); //椭圆倾斜的角度
ctx.scale(0.3, 1);//因为arc画的是圆 是通过scale变形变成的椭圆
ctx.arc(0, 0, radius, 0, Math.PI * 2);//画圆 注意这里前两个参数是0，0
ctx.stroke();
ctx.draw();
}O ponto principal aqui é que a ordem deve estar na ordem acima. Se você escalar primeiro, descobrirá que não importa como você gira, é inútil. Se você não transladar primeiro para localizar a origem, a rotação e a escala estará fora do caminho.
Se houver outros métodos melhores, por favor me dê alguns conselhos. Acabei de começar a explorar o canvas, hehe, principalmente para registrar minhas armadilhas.