Question

我正在尝试创建一个简单的图形计算器，在画布中绘制正弦函数。

我在另一个Stack Exchange问题上找到了以下代码：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var i;

ctx.stroke();

var counter = 0, x=0,y=180;

//100 iterations
var increase = 90/180*Math.PI / 9;
for(i=0; i<=360; i+=10){

     ctx.moveTo(x,y);
    x = i;
    y =  180 - Math.sin(counter) * 120;
    counter += increase;

    ctx.lineTo(x,y);
    ctx.stroke();
    //alert( " x : " + x + " y : " + y + " increase : " + counter ) ;
}

我试图弄清楚功能的哪个部分是幅度，相移，周期和频率。我发现在for循环中，值是相移，画布宽度和周期。

另外，我可以通过插入不同的值/变量来更改函数的值吗？我可以通过更改它来将罪改为cos或tan吗？

Answer 1

我刚刚在现有代码中添加了变量。它们都不是实际变量，只有120的{{1}}已经存在。

＆＃13;

amplitude

＆＃13;

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var i;

var counter = 0, x=0, y=180;

var amplitude = 120,
    phase = 180,
    frequency = 2;
// period = 1 / frequency

//100 iterations
var increase = 0.5 * Math.PI / 90;

for(i=0; i<=360; i++) {
    ctx.moveTo(x, y);
    x = i;
    y =  180 - Math.sin((counter + phase) * frequency) * amplitude;
    counter += increase;

    ctx.lineTo(x, y);
    //alert( " x : " + x + " y : " + y + " increase : " + counter ) ;
}
ctx.stroke(); // Don't stroke for each iteration of the loop.

＆＃13;

对于在HTML5画布中绘制正弦函数的图形，所有输入都是什么？

1 个答案: