Explicação detalhada das propriedades das linhas da tela

Valores: bunda (valor padrão), redondo, quadrado

 var canvas=document.getElementById(canvas);canvas.width=800;canvas.height=800;var context=canvas.getContext(2d);context.lineWidth=40;context.strokeStyle=#005588;//Três beginpath() desenham três linhas paralelas context.beginPath();context.moveTo(100,200);co ntext.lineTo(700.200);context.lineCap=butt;context.stroke();context.beginPath();context.moveTo(100.400);context.lineTo(700.400);context.lineCap=roun d;context.stroke();context.beginPath();context.moveTo(100.600);context.lineTo(700.600);context.lineCap=square;context.stroke();//baselinecontext.li neWidth=1;context.strokeStyle=#27a;context.moveTo(100,100);context.lineTo(100,700);context.moveTo(700,100);context.lineTo(700,700);context.stroke();

Quando round é usado para animação, os cantos arredondados podem ser desenhados diretamente. O efeito de lineCap só pode ser usado no início e no final do segmento de linha, não na conexão.

lineCap=square pode ser usado para fechar completamente o segmento de linha quando ele estiver fechado, mas ainda é recomendado usar ClothPath() para fechá-lo.

 var canvas=document.getElementById(canvas);canvas.width=800;canvas.height=800;var context=canvas.getContext(2d);context.beginPath();context.moveTo(100, 350);context.lineTo(500.350);context.lineTo(500.200);context.lineTo(700.400);context.lineTo(500.600);context.lineTo(500.450);context.lineTo(100.450);context.lineTo(100.350 );// context.closePath(); //Recomendado context.lineWidth=10;context.lineCap=square; //Não recomendado context.fillStyle=yellow;context.strokeStyle=#058context.fill();context.stroke();

Os cinco ângulos em um círculo dividem 360°, cada ângulo é 72°, 90°-72°=18°

Os ângulos no pequeno círculo dividem 72°, 18°+36°=54°

Ângulo em radianos - radianos = ângulo*π/180, ou seja (18+i*72)*Math.PI/180

 var canvas=document.getElementById(canvas);canvas.width=800;canvas.height=800;var context=canvas.getContext(2d);context.beginPath();//Ângulo para radiano: dividir por 180*PIfor( var i=0;i<5;i++){ context.lineTo(Math.cos((18+i*72)/180*Math.PI)*300+400, -Math.sin((18+i*72)/180*Math.PI)*300+400 );context.lineTo(Math.cos((54+i*72)/180*Math.PI)*150+400, -Math.sin((54+i*72)/180*Math.PI)*150+400);}context.closePath();context.lineWidth=10;context.stroke();

Encapsulado em uma função:

 window.onload=function(){ var canvas=document.getElementById(canvas); canvas.width=800; var context=canvas.getContext(2d); 150.300.400.400)} função desenharEstrela(ctx,r,R,x,y,){ ctx.beginPath(); //Ângulo para radiano: divida por 180*PI for(var i=0;i<5;i++){ ctx.lineTo(Math.cos((18+i*72)/180*Math .PI)*R+x, -Math.sin((18+i*72)/180*Math.PI)*R+y); ctx.lineTo(Math.cos((54+i*72)/180*Math.PI)*r+x, -Math.sin((54+i*72)/180*Math.PI)*r+y ); } ctx.closePath();

Modifique o pequeno r = 80, 200 e 400 respectivamente para obter os seguintes gráficos

Adicione um parâmetro de rotação no sentido horário: rot

 window.onload=function(){ var canvas=document.getElementById(canvas); canvas.width=800; var context=canvas.getContext(2d); 150,300,400,400,30);} //Rot função ângulo de rotação no sentido horário drawStar(ctx,r,R,x,y,rot){ ctx.beginPath(); //Ângulo para radianos: divida por 180*PI for(var i=0;i<5;i++){ ctx.lineTo( Math.cos((18+i*72-rot)/180*Math.PI)*R+x, -Math.sin((18+i*72-rot)/180*Math.PI)*R+y); )*r+x, -Math.sin((54+i*72-rot)/180*Math.PI)*r+y } ctx.closePath();

O efeito da rotação de 30 graus é o seguinte:

1. valor lineJoin

esquadria (padrão) sempre apresenta canto agudo, esquadria chanfrada, canto arredondado

O bisel é como o efeito de uma fita dobrada.

2. Atributos miterLimit relacionados à mitra

Defina o r pequeno como 30 e lineJoin como mitre. O efeito é o seguinte: os cantos não são estendidos em cantos agudos, mas são exibidos de maneira chanfrada.

 context.lineJoin=miter;drawStar(context,30,300,400,400,30);

Por que?

Como o valor padrão de context.miterLimit=10 é 10,

miterlimit só é eficaz quando lineJoin é mitre.

miterLimit refere-se ao valor máximo da distância entre os cantos internos e externos produzido quando a esquadria é usada como forma de conectar linhas.

O valor padrão é 10, o que significa que o valor máximo é 10px. Quando exceder 10px, será exibido no modo chanfrado.

Quando o raio do círculo interno r é definido como 30 acima, o ângulo agudo formado é muito acentuado e a distância entre o canto interno e o canto externo excede o miterLimit de 10.

Agora altere o miterlimit para um valor maior, para 20. O efeito é o seguinte:

 context.lineJoin=miter context.miterLimit=20;

Nota: miterLimit não é a distância da ponta branca à ponta preta. Esta distância é muito maior que 20px.

Quando miterLimit é gerado, a linha deve ter uma largura e o canto agudo da linha central da linha com largura é a distância direta do canto agudo externo.

canvas fornece um valor de experiência miterLimit de 10. Somente em circunstâncias extremamente especiais, quando cantos muito agudos precisam ser representados, o miterLimit precisa ser modificado.

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.