캔버스 선의 속성에 대한 자세한 설명

값: 엉덩이(기본값), 원형, 정사각형

 var canvas=document.getElementById(캔버스);canvas.width=800;canvas.height=800;var context=canvas.getContext(2d);context.lineWidth=40;context.StrokeStyle=#005588;//Three Beginpath() 세 개의 평행선 그리기 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();

애니메이션에 라운드를 사용하면 둥근 모서리를 직접 그릴 수 있습니다. lineCap의 효과는 연결 부분이 아닌 선분의 시작과 끝에서만 사용할 수 있습니다.

lineCap=square를 사용하면 선분을 닫을 때 선분을 완전히 닫을 수 있지만, 여전히 이를 닫으려면clothPath()를 사용하는 것이 좋습니다.

 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(); //권장됨 context.lineWidth=10;context.lineCap=square; //권장되지 않음 context.fillStyle=yellow;context.StrokeStyle=#058context.fill();context.Stroke();

원의 다섯 각도는 360°를 이등분하며 각 각도는 72°, 90°-72°=18°입니다.

작은 원의 각도는 72°, 18°+36°=54°로 이등분됩니다.

라디안에 대한 각도 - 라디안 = angle*π/180, 즉 (18+i*72)*Math.PI/180

 var canvas=document.getElementById(canvas);canvas.width=800;canvas.height=800;var context=canvas.getContext(2d);context.beginPath();//각도를 라디안으로 나누기: 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();

함수로 캡슐화됩니다.

 window.onload=function(){ var canvas=document.getElementById(canvas); canvas.width=800; canvas.height=800; var context=canvas.getContext(2d); drawStar(context, 150,300,400,400)} 함수 drawStar(ctx,r,R,x,y,){ ctx.beginPath(); //각도를 라디안으로: 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();}

작은 r=80, 200, 400을 각각 수정하여 다음 그래픽을 얻습니다.

시계 방향 회전 매개변수 추가: rot

 window.onload=function(){ var canvas=document.getElementById(canvas); canvas.width=800; canvas.height=800; var context=canvas.getContext(2d); drawStar(context, 150,300,400,400,30);} //시계방향 회전 각도 함수 drawStar(ctx,r,R,x,y,rot){ ctx.beginPath(); //각도를 라디안으로 변환: 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) ctx.lineTo(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.스트로크();}

30도 회전의 효과는 다음과 같습니다.

1. lineJoin 값

마이터(기본값)는 항상 날카로운 모서리, 베벨 마이터, 둥근 모서리를 나타냅니다.

경사는 리본을 접은 효과와 같습니다.

2. 마이터 관련 miterLimit 속성

작은 r을 30으로 설정하고 lineJoin을 마이터로 설정합니다. 효과는 다음과 같습니다. 모서리가 날카로운 모서리로 확장되지 않고 경사 방식으로 표시됩니다.

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

왜?

context.miterLimit=10의 기본값은 10이므로,

miterlimit는 lineJoin이 miter인 경우에만 유효합니다.

miterLimit는 선을 연결하는 방법으로 마이터를 사용할 때 생성되는 내부 모서리와 외부 모서리 사이의 거리의 최대값을 나타냅니다.

기본값은 10이며, 최대값은 10px입니다. 10px를 초과하면 경사 모드로 표시됩니다.

내부 원 반경 r을 30 이상으로 설정하면 형성되는 예리한 각도가 매우 날카로워 내부 모서리와 외부 모서리 사이의 거리가 miterLimit인 10을 초과합니다.

이제 miterlimit를 더 큰 값인 20으로 변경합니다. 효과는 다음과 같습니다.

 context.lineJoin=miter; context.miterLimit=20; drawStar(컨텍스트,30,300,400,400,30);

참고: miterLimit은 흰색 끝에서 검은색 끝까지의 거리가 아닙니다. 이 거리는 20px보다 훨씬 큽니다.

miterLimit이 생성되면 선에는 너비가 있어야 하며 너비가 있는 선 중간 선의 날카로운 모서리는 외부 날카로운 모서리로부터의 직접적인 거리입니다.

캔버스는 miterLimit 경험 값 10을 제공합니다. 매우 날카로운 모서리를 표현해야 하는 매우 특수한 상황에서만 miterLimit을 수정해야 합니다.

위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.