댓글 : 이전 기사에서는 직사각형과 원을 그리는 방법에 대해 이야기했습니다. 그들은 모두 완성 할 수있는 기본 캔버스 드로잉 기능을 가지고 있습니다. 이 기사에서 언급 된 둥근 사각형은 다른 방법을 통해서만 시뮬레이션 할 수 있습니다. 우리는 표면을 라인으로 나누는 기능을 사용하며 둥근 사각형이 실제로 4 개의 후크와 같은 곡선으로 구성되어 있음을 쉽게 알 수 있습니다. 관심있는 친구들은 그것에 대해 배울 수 있습니다.
이전 기사에서는 사각형과 원을 그리는 방법에 대해 이야기했습니다. 그들은 모두 완성 할 수있는 기본 캔버스 드로잉 기능을 가지고 있습니다. 이 기사에서 언급 된 둥근 사각형은 다른 방법을 통해서만 시뮬레이션 할 수 있습니다.정상적인 둥근 사각형의 경우 먼저 네 모서리의 둥근 모서리가 동일하다고 가정하자. 우리는 표면을 선으로 나누는 기능을 사용하며 둥근 사각형이 실제로 4 개의 후크와 같은 곡선으로 구성되어 있음을 쉽게 알 수 있습니다.
고리에 대해 말하면, Arcto를 소개하는 내 기사를 읽은 경우 Arcto를 사용하여 이런 종류의 그래프를 그릴 수 있음을 즉시 이해할 수 있습니다.
Arcto에 대해 이야기했을 때 Arcto는 두 번째 접선 확장이 그가 그린 선 (위의 마지막 부분)에 영향을 미치지 않을 것이라는 특징을 가지고 있으며, 이는 또한 변형에 대해 걱정하지 않고 둥근 사각형을 그릴 수 있도록 편의성을 제공합니다.
다음은 외국 웹 사이트에서 찾은 둥근 사각형을 그리는 방법입니다. 가장 효율적입니다.
// 둥근 사각형
CanvasRenderingContext2d.prototype.roundRect = function (x, y, w, h, r) {
if (w & lt; 2 * r) r = w / 2;
if (h & lt; 2 * r) r = h / 2;
this.beginpath ();
this.moveto (x+r, y);
this.arcto (x+w, y, x+w, y+h, r);
this.arcto (x+w, y+h, x, y+h, r);
this.arcto (x, y+h, x, y, r);
this.arcto (x, y, x+w, y, r);
// this.arcto (x+r, y);
this.closepath ();
이것을 반환하십시오;
}
이 함수의 매개 변수는 X 좌표, Y 좌표, 너비, 높이 및 둥근 코너 반경입니다. 마지막 매개 변수 - 둥근 코너 반경에 특별한주의를 기울이십시오.
이 방법은 Arcto를 4 번 사용하여 둥근 사각형을 그리며 각 코너의 아크는 동일합니다. 이 둥근 사각형의 좌표 지점은 사각형과 동일한 왼쪽 코너이지만 시작점은 여기에 없지만 다음과 같습니다.
줄 중 하나를 제거 하고이 방법이 어떻게되는지 볼 수 있습니다.
물론, 나는 당신이 어떤 모양을 그려도 어떤 길을 닫아야한다는 것을 기억하고 싶습니다.
이 방법은 마지막에 이것을 반환하여 다음과 같은 체인 구문을 사용할 수 있습니다.
ctx.roundRect (200,300,200,120,20) .Stroke (); 필요하지 않으면 제거 할 수 있습니다.
ContexTrenderingContext2D 프로토 타입을 확장하지 않으려면이 메소드를 사용하여 다른 기능을 만들 수도 있습니다.
이 기능을 발견했을 때 Arcto가 무엇인지 몰랐기 때문에 어떤 웹 사이트를 찾았는지 기억하지 못했습니다. 어쨌든, 그것은 나에게 독창적이지 않았다. 저자에게 감사합니다.
이전 기사에서, 나는 CSS3의 Border-Radius가 각 모서리 또는 각 모서리의 원인으로 둥근 직사각형을 쉽게 그릴 수 있기 때문에이 방법에서 그려진 둥근 사각형의 각 모서리가 일관성이 있음을 항상 강조했습니다. 나는 캔버스에서 불규칙한 둥근 사각형을 그릴 수있는 방법을 찾을 것이지만 개인적으로는 그것이 매우 어렵다고 생각합니다.