방정식을 갖는 포물선을 그리는 방법을 알 수 없습니다. y^2 = 4ax
그래서 두 끝점, 즉 P0, P2가 있지만 quadraticCurveTo()기능 에 넣을 제어점을 찾는 방법을 알 수 없습니다 .
2 차 베 지어를이 포물선 수식에 일치시키고 원점이 0이라고 가정 하려면 끝점 중 하나에 제어점을 배치 -y0하거나 -y1끝점 중 하나 에서 제어점을 배치 할 수 있습니다 .
먼저 공식을 재정렬 해 보겠습니다.
y 2 = 4 축
에:
x = y 2 / 4a
아래에서 아래로 플롯 할 수 있습니다.
이 경우 우리는 간단히 모든 것을 요약하고 제어점으로 y와 mid x의 역수를 사용할 수 있습니다.
하지만 일반적인 원칙은 끝점의 접선을 찾는 것입니다. 그런 다음 그 선이 제어점과 교차하는 곳에 배치해야합니다. 교차로를 찾는 방법에 대한 수학적 단계 를 원한다면 Erik Man의 답변을 여기 에서 살펴볼 것을 권장 합니다 (오늘 게시되었지만 훨씬 더 자세한 수학 내용을 분석합니다).
따라서 캔버스 창에 플로팅하면 (검은 색은 포물선, 빨간색은 2 차 곡선) :
var ctx = document.querySelector("canvas").getContext("2d"),
w = ctx.canvas.width, h = ctx.canvas.height;
ctx.strokeStyle = "red";
ctx.lineWidth = 2;
ctx.translate(0, 6);
// formula
function f(y, a) {return y * y / (a * 4)};
var a = 80;
plotWindow();
function plotWindow() {
ctx.clearRect(0, -6, w, h);
ctx.fillStyle = "#000";
// plot parabola using formula
for(var i = 0; i < w; i++) {
var y = f(i - w * 0.5, a);
ctx.fillRect(i - 2, y - 2, 4, 4);
}
// plot parabola using quadratic curve:
var x0 = 0;
var y0 = f(-w * 0.5, a);
var x1 = w;
var y1 = f( w * 0.5, a);
var cx = x1 * 0.5; // control point is center for x
var cy = -y0; // control point is -y0 for y assuming top of parabola = 0
ctx.beginPath();
ctx.moveTo(x0, y0);
ctx.quadraticCurveTo(cx, cy, x1, y1);
ctx.stroke();
// plot a
ctx.fillStyle = "blue";
ctx.fillRect(cx - 3, a - 3, 6, 6);
ctx.fillText("a=" + a, cx + 6, a + 5)
}
// slider
document.querySelector("input").onchange = function() {
a = +this.value;
plotWindow();
};canvas {border:1px solid #777}<script src="https://cdn.rawgit.com/epistemex/slider-feedback/master/sliderfeedback.min.js"></script>
<label>a: <input type="range" min=10 max=172 value=80></label><br>
<canvas width=600 height=190></canvas>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다