在画布上绘制曲线

时间:2014-10-22 23:08:16

标签: javascript html5 canvas html5-canvas

是否可以通过方程在画布中绘制曲线?如果是这样,怎么样?让我们说我有数学方程式y = 0,5 * x ^ 2,如何打印方程式图?

我尝试使用bezierCurveToquadraticCurveTo方法失败。

1 个答案:

答案 0 :(得分:4)

您需要填充点数组,然后使用moveTolineTo绘制它。像这样的东西

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();

bezierCurveToquadraticCurveTo等具有固定的等式形式。我不确定它们是否可以用于绘制抛物线,但任意曲线都是不可能的。