HTML5 Canvas_html5 튜토리얼 기술로 타원을 그리는 여러 가지 방법 요약

개요
HTML5의 캔버스는 타원을 그리는 방법을 직접 제공하지 않습니다. 다음은 여러 가지 그리기 방법을 요약한 것입니다. 각 방법에는 장단점이 있으므로 상황에 따라 선택해야 합니다. 각 메소드의 매개변수는 동일합니다.
context는 Canvas의 2D 그리기 환경 객체이고,
x는 타원 중심의 가로좌표,
y는 타원 중심의 세로좌표,
a입니다. 는 타원의 가로 반축 길이이고,
b는 타원의 세로 반축 길이입니다.
모수 방정식 방법
타원의 매개 방정식을 사용하여 타원을 그리는 방법입니다

코드 복사

코드는 다음과 같습니다.

//----------매개변수 방정식을 사용하여 타원 그리기--------- ------ -----
//함수의 매개변수 x와 y는 타원의 중심입니다. a, b는 가로 반축이고 세로 반축의 길이입니다. 동시에 0이 될 수 없는 타원
//이 방법의 단점은 linWidth가 더 넓고 타원이 더 평평할 때
//타원 내부의 장축 끝이 더 날카롭지 않고 매끄럽고 효율성이 낮습니다
function ParamEllipse(context, x, y, a, b)
{
//max는 1을 장축 값 a와 더 큰 값으로 나눈 값과 같습니다. b
//i는 각 루프마다 1/max씩 증가하여 각도 증가를 나타냅니다.
//이렇게 하면 각 사이클에서 그려진 경로(호)를 1픽셀에 가깝게 만듭니다.
var step = (a > ; b) ? 1 / a : 1 / b;
context.moveTo(x a, y) //타원의 왼쪽 끝점에서 그리기 시작
i = 0; i {
//매개변수 방정식은 x = a * cos(i), y = b * sin(i),
//매개변수는 도(라디안)를 나타내는 i입니다.
context.lineTo(x a * Math.cos(i), y b * Math.sin(i))
}
context.closePath( );
context.Stroke();
};

균등 압축 방법
이 방법은 균일 압축을 위해 이론적으로 표준 타원을 얻을 수 있습니다. 해결 방법은 5를 참조하십시오.

코드 복사코드는 다음과 같습니다.

//-- -- -----타원을 그리는 균일한 압축 방법---------

//호 방식을 사용하여 그리는 방법입니다. 원을 그려 스케일로 결합
//가로축 또는 세로축 방향으로 스케일링(균일 압축)
//이 방법으로 그린 ​​타원의 가장자리는 장축의 끝 부분에 가까울수록 두꺼워집니다 , 장축 끝의 선 너비는 정상 값입니다
//측면 단축에 가까울수록 타원은 더 평평하고 얇아지며, 심지어 스케일의 결과인 불연속성도 발생합니다.
//이러한 단점은 고리(행성후광)의 입체감을 표현할 때와 같이 때로는 장점이 되기도 합니다
//매개변수 a 또는 b가 0인 경우에는 이 방법을 적용할 수 없습니다
function EvenCompEllipse(context, x, y, a, b)
{
context.save()
//호 메소드의 반경 매개변수로 a와 b 중 더 큰 값을 선택합니다.
var r = (a > b) ? a : b;
var ratioX = a / r; //가로축 배율
var ratioY = b / r; context.scale(ratioX, ratioY); //크기 조정(균일한 압축)
context.beginPath();
// 타원의 왼쪽 끝점에서 시작하여 시계 반대 방향으로 그립니다.
context.moveTo((x a) / ratioX, y / ratioY);
context.arc(x / ratioX, y / ratioY, r, 0, 2 * Math.PI)
context.closePath(); );
context.restore();
};



큐빅 베지어 Er 곡선 방법 1

큐빅 베지어 곡선 그리기는 실제 근사치입니다. 그림을 그리며 이론상으로도 근사치입니다. 하지만 효율성이 높기 때문에 컴퓨터 벡터 그래픽에서 타원을 그리는 데 자주 사용되지만 구체적인 이론에 대해서는 잘 모르겠습니다. 근사화 정도는 두 제어점의 위치 선택에 달려 있습니다. 이 방법의 제어점 위치는 제가 직접 실험해본 결과 정확도는 괜찮습니다.



코드를 복사하세요

코드는 다음과 같습니다. //---------3차 베지어 곡선을 사용하여 타원 시뮬레이션 1---------------- -----

//이 방법은 lineWidth가 더 넓고 타원이 더 평평할 때

//장축 끝이 더 날카롭고 매끄럽지 않은 현상도 발생합니다

function BezierEllipse1(context , x, y, a, b )
{
//핵심은 bezierCurveTo
의 두 제어점 설정입니다.//0.5와 0.6은 두 개의 핵심 계수입니다(이 함수의 실험에서 얻음) )
var ox = 0.5 * a,
oy = 0.6 * b;
context.save()
context.translate(x, y)
context.beginPath();
//타원 수직에서 축의 하단이 시계 반대 방향으로 그리기 시작합니다.
context.moveTo(0, b)
context.bezierCurveTo(ox, b, a, oy, a, 0);
context.bezierCurveTo(a, -oy , ox, -b, 0, -b)
context.bezierCurveTo(-ox, -b, -a, -oy, -a, 0); >context.bezierCurveTo(-a, oy, - ox, b, 0, b);
context.closePath()
context.strove(); };


3차 베지어 곡선 방법 2
이 방법은 StackOverFlow의 게시물에 대한 답변으로 변경되었으며 정확도가 더 높으며 타원을 그릴 때 자주 사용하는 방법이기도 합니다. >

코드 복사코드는 다음과 같습니다.

//--------- 3차 베지어 곡선을 사용하여 타원 2 시뮬레이션---------

//이 방법은 lineWidth가 더 넓고 타원이 더 평평한 경우에도 생성됩니다
//, 장축 끝이 날카롭고 부드럽지 않습니다
//이 방법은 이전 베지어 방법보다 정확하지만 효율성이 약간 떨어집니다
function BezierEllipse2(ctx, x, y, a, b)
{
var k = .5522848,
ox = a * k, // 수평 제어점 오프셋
oy = b * k // 수직 제어점 오프셋 Quantity
ctx.beginPath( );
//타원의 왼쪽 끝점에서 시작하여 시계 방향으로 4개의 3차 베지어 곡선을 그립니다.
ctx.moveTo(x - a, y)
ctx.bezierCurveTo (x - a, y - oy, x - ox, y - b, x, y - b);
ctx.bezierCurveTo(x ox, y - b, x a, y - oy, x a, y); oy, x ox, y b, x, y b);
ctx.bezierCurveTo(x - ox, y b, x - a, y oy, x - a, y)
ctx.closePath(); >ctx.Stroke();
};



래스터 방식

그래픽의 기본 알고리즘을 사용하여 캔버스 기능에 따라 픽셀을 조작할 수 있는 방식입니다. 타원. 예를 들어 중간점 타원 그리기 알고리즘 등이 있습니다.
한 가지 예는 정원 친구 "Doudou Gou"의 블로그 게시물 "HTML5 Canvas Improvement Class (1) - Raster Graphics (1) Midpoint Circle Drawing Algorithm"입니다. 이 방법은 비교적 "독창적"이며 뛰어난 유연성, 고효율 및 높은 정확도를 가지고 있지만 타원을 그리는 데 유용한 기능을 구현하는 것은 상대적으로 복잡합니다. 예를 들어 선 너비가 변경되면 알고리즘이 더 복잡해집니다. 원을 그리는 알고리즘이지만 타원을 그리는 알고리즘은 아래에서 참고할 수 있습니다. 데모 다음은 래스터 방법 외에 타원 함수 그리기에 대한 몇 가지 데모입니다. 데모 코드는 다음과 같습니다.





코드 복사

코드는 다음과 같습니다.

var canvas,

context;
var div = document.getElementById( "CanvasWrap");
div.innerHTML = "";
canvas = document.createElement("canvas")
canvas.style.width = "600px"
canvas.style.height = "600px"
canvas.width = 600;
canvas.height = 600;
context = canvas.getContext("2d")
div.appendChild(canvas) ;
function execDraw ()
{
//Chrome에서 선 너비가 1 이하인 문제 해결
context.lineWidth = 1.1;
ParamEllipse(context, 130, 80, 50, 50); //원
ParamEllipse(context, 130, 80, 100, 20) //Ellipse
EvenCompEllipse(context, 130, 200, 50 , 50); //원
EvenCompEllipse(context, 130, 200, 100, 20); //타원
BezierEllipse1(context, 470, 80, 50, 50); context, 470, 80, 100, 20 ); //타원
BezierEllipse2(context, 470, 200, 50, 50); //원
BezierEllipse2(context, 470, 200, 100, 20); /Ellipse
//유사성 특성 감지(겹침 정도)
ParamEllipse(context, 300, 450, 250, 50)
context.StrokeStyle = "yellow"
BezierEllipse1(context, 300) , 450, 250, 50);
context.StrokeStyle = "blue";
BezierEllipse2(context, 300, 450, 250, 50)
functionclearCavnas()
{
context.clearRect(0 , 0, 600, 600)
}
// ]]>


Execute
Clear >


코드를 성공적으로 실행하려면 HTML5 Canvas를 지원하는 브라우저가 필요합니다.
처음으로 블로그에 글을 쓰는 데 하루 종일 걸렸는데, 쉽지 않았어요! 블로그파크의 어두운 스킨 템플릿은 삽입된 코드에 대해 잘 표시되지 않습니다. 코드 형식을 알아내느라 정말 고생했어요!