삼각 함수를 사용하여 캔버스에 점선을 그리는 방법

캔버스 API에는 점선이 없기 때문에

따라서 직접 구현해야 합니다.

그런데 삼각함수를 복습하면 좋지 않을까요?

 var context=document.getElementById(canvas).getContext(2d);function drawDashedLine(context,x1,y1,x2,y2,dashlength){ dashlength=dashlength===undefine?5:dashlength; //직각 변의 길이 var deltay=y2-y1; //다른 명령어 변의 길이 var numDashes=Math.floor( Math.sqrt(deltaX*deltaX+deltay*deltay)/dashlength //Math.sqrt는 숫자 dashlength의 제곱근과 점선의 각 점 길이를 반환합니다.) var EverydashLength_x=deltaX/numDashes //X축의 모든 점을 결정합니다. 점선 점의 시작점 var EverydashLength_y=deltay/numDashes //Y축의 각 점선 점의 시작점을 결정합니다. for(var i=0;i<numDashes;i++){ context[i%2===0?'moveTo':lineTo] (x1+everydashLength_x* i,y1 +everydashLength_y*i) } context.Stroke()}context.lineWidth=3context.StrokeStyle=bluedrawDashedLine(context,20,20,context.canvas.width-20,20,20)

효과는 그림과 같습니다

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