javascript - 在这个 html5 canvas 实现中这些正弦计算有什么问题

Question

我知道我可以使用猜测并检查 JavaScript 数学，但结果似乎非常不正确，所以我想知道这个数学究竟出了什么问题。 (正弦根本不显示，但是如果你改变周围的数字，你就可以得到它——这对我来说在数学上没有意义。)我用在线图形计算器检查了，测试在这里(与 Canvas 的宽度和高度):https://www.desmos.com/calculator/ohs4l3jxkc这似乎是正确的。这是此实现的工作 jsFiddle http://jsfiddle.net/JV5V3/为了便于使用。

html:

 <canvas style="width:100%;height:50px;"></canvas>

JavaScript:

makeWave($("canvas"));
function makeWave(canvas){
    var twoPI = Math.PI * 2;
    var width = canvas.css('width').replace(/\D/g,'');
    var height = canvas.css('height').replace(/\D/g,'');
    var xMulti = width/twoPI;

    var c = canvas[0];
    var context=c.getContext("2d");
    for(var i = 0; i < width*2; i++){
        var sineVal = (-1*Math.sin(i/xMulti)*(height/2)) + (height/2);
        sineVal = Math.round(sineVal);
        context.rect(i,sineVal,1,1);                
    }
    context.stroke();

    //scroll

    var imageData = context.getImageData(0, 0, width*2, height);
    var count = -1;
    setInterval(function(){
        context.clearRect(0, 0, width,height);
        context.putImageData(imageData, count+width, 0);
        context.putImageData(imageData, count, 0);
        --count;
        if(count <= -width) {
            clearInterval(this);
        }
    },60);
}

这是更新后的 jsFiddle，其中包含一些更正:http://jsfiddle.net/JV5V3/2/尽管如此，它并没有显示出它的意图。

Answer 1

context.rect(i,-sineVal,1,1);

sineVal 此处不应设为负数；您已经为其添加了 height/2，因此它将位于 Canvas 可见部分的上方。 Updated fiddle.