캔버스에 곡선 그리기

Question

캔버스에서 곡선을 그 방정식으로 그릴 수 있습니까? 그렇다면 어떻게? 방정식의 그래프를 출력하는 수학 공식 y = 0,5 * x^2가 있다고 가정 해 봅시다.

bezierCurveTo 및 quadraticCurveTo 메서드를 성공적으로 사용하지 못했습니다.

Answer 1

점의 배열을 채우고 moveTo 및 lineTo을 사용하여 그릴 필요가 있습니다. 이

var x1 = 0; // Minimum x 
var x2 = 10; // Maximum x 
var xstep = 0.1; // How smooth the curve should be 
// ctx is the context object 
// You may want to apply some transformations to the coordinate system 
for (var x = x1; x < x2; x += xstep) { 
    var y = 0.5 * x * x; 
    if (x == x1) { 
     ctx.moveTo(x, y); // First point 
    } else { 
     ctx.lineTo(x, y); // Subsequent points 
    } 
} 

ctx.stroke(); 

bezierCurveTo, quadraticCurveTo 등 비슷해 방정식 형태를 고정했다. 나는 그들이 포물선을 그리는 데 사용될 수 있는지 모르지만 임의의 곡선은 문제가되지 않습니다.