Explicación detallada de las propiedades de las líneas del lienzo.

Valores: tope (valor predeterminado), redondo, cuadrado

 var lienzo=document.getElementById(lienzo);canvas.width=800;canvas.height=800;var context=canvas.getContext(2d);context.lineWidth=40;context.strokeStyle=#005588;//Tres beginpath() dibujan tres líneas 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();

Cuando se usa redondo para la animación, las esquinas redondeadas se pueden dibujar directamente. El efecto de lineCap solo se puede usar al principio y al final del segmento de línea, no en la conexión.

lineCap=square se puede usar para cerrar completamente el segmento de línea cuando está cerrado, pero aún así se recomienda usar ClothPath() para cerrarlo.

 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; //No recomendado context.fillStyle=amarillo;context.strokeStyle=#058context.fill();context.stroke();

Los cinco ángulos de un círculo bisecan 360°, cada ángulo mide 72°, 90°-72°=18°

Los ángulos en el círculo pequeño bisecan 72°, 18°+36°=54°

Ángulo a radianes - radianes = ángulo*π/180, es decir (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 a radianes: dividir por 180*PIfor( var i=0;i<5;i++){ contexto.lineTo(Math.cos((18+i*72)/180*Math.PI)*300+400, -Math.sin((18+i*72)/180*Math.PI)*300+400 ); contexto.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 en una función:

 ventana.onload=función(){ var lienzo=document.getElementById(lienzo.width=800; lienzo.height=800; var contexto=lienzo.getContext(2d); 150,300,400,400)} función dibujarEstrella(ctx,r,R,x,y,){ ctx.beginPath(); //Ángulo a radianes: dividir 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(); ctx.stroke();}

Modifique los pequeños r = 80, 200 y 400 respectivamente para obtener los siguientes gráficos

Agregue un parámetro de rotación en el sentido de las agujas del reloj: rot

 ventana.onload=función(){ var lienzo=document.getElementById(lienzo.width=800; lienzo.height=800; contexto var=lienzo.getContext(2d); 150,300,400,400,30);} // Función de ángulo de rotación en el sentido de las agujas del reloj drawStar(ctx,r,R,x,y,rot){ ctx.beginPath(); //Ángulo a radianes: dividir 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(Math.cos((54+i*72-rot)/180*Math.PI); )*r+x, -Math.sin((54+i*72-rot)/180*Math.PI)*r+y } ctx.closePath(); ctx.stroke();}

El efecto de girar 30 grados es el siguiente:

1. valor de lineJoin

inglete (predeterminado) siempre presenta una esquina afilada, inglete biselado, esquina redondeada

El bisel es como el efecto de una cinta doblada.

2. Atributos miterLimit relacionados con Mitre

Establezca la r pequeña en 30 y lineJoin en inglete. El efecto es el siguiente: las esquinas no se extienden en esquinas afiladas, sino que se muestran en forma de bisel.

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

¿Por qué?

Debido a que el valor predeterminado de context.miterLimit=10 es 10,

miterlimit solo es efectivo cuando lineJoin es mitre.

miterLimit se refiere al valor máximo de la distancia entre las esquinas interior y exterior producida cuando se utiliza el inglete como forma de conectar líneas.

El valor predeterminado es 10, lo que significa que el valor máximo es 10 px. Una vez que supere los 10 px, se mostrará en modo biselado.

Cuando el radio del círculo interior r se establece en 30 arriba, el ángulo agudo formado es muy agudo y la distancia entre la esquina interior y la esquina exterior excede el límite de inglete de 10.

Ahora cambie el límite de inglete a un valor mayor, a 20. El efecto es el siguiente:

 contexto.lineJoin=inglete; contexto.miterLimit=20; drawStar(contexto,30,300,400,400,30);

Nota: miterLimit no es la distancia desde la punta blanca hasta la punta negra. Esta distancia es mucho mayor que 20 píxeles.

Cuando se genera miterLimit, la línea debe tener un ancho y la esquina afilada de la línea media de la línea con ancho es la distancia directa desde la esquina afilada exterior.

canvas proporciona un valor de experiencia miterLimit de 10. Solo en circunstancias extremadamente especiales, cuando es necesario representar esquinas muy afiladas, es necesario modificar miterLimit.

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.