Javascript 如何使用画布绘制可以向左移动的曲线？

我正在编写一个程序，用画布绘制正弦曲线。
HTML:

这真的很好：

然而，现在我只能为画布宽度提供100px，因此只能看到曲线最左边的100px

---

我想存档这个效果：当曲线的右点大于画布的宽度时，整个曲线可以向左移动，所以我可以看到曲线的最右点，有点像曲线向左流动。我可以这样做吗？

元素的基本思想之一是计算机“忘记”绘图命令，只保存像素，就像位图一样。因此，要向左移动所有内容，需要清除画布并再次绘制所有内容

还有一件事我想建议你-你总是从x=0和y=0开始，但是很明显，在x=0时，y也不一定等于0。编辑：实现了这个

总之，我最终得到了以下代码：

var canvas=document.getElementById（“mycanvas”）；
变量点={}；//跟踪关键点为x、值为y的对象中的点
变量计数器=0；//跟踪移动代码何时开始
函数f（x）{
返回50*Math.sin（0.1*x）+50；
}
if（canvas.getContext）{
var ctx=canvas.getContext（“2d”）；
ctx.lineWidth=3；
var x=0，
y=f（0）；
var timeout=setInterval（函数（）{
如果（计数器<100）{//如果它不需要移动，像你已经做的那样画
ctx.beginPath（）；
ctx.moveTo（x，y）；
点[x]=y；
x+=1；
y=f（x）；
ctx.lineTo（x，y）；
ctx.stroke（）；
如果（x>1000）{
清除间隔（超时）；
}
}否则{//移动部分。。。
clearRect（0，0，100，100）；//清除画布
ctx.beginPath（）；
点[x]=y；
x+=1；
y=f（x）；
对于（变量i=0；i<100；i++）{
//从x=i+（计数器-100）开始，绘制穿过点的所有线
//to x=计数器。请注意，画布中的x在这里就是i
//从0到100
ctx.lineTo（i，点[i+计数器-100]）；
}
ctx.stroke（）；
}
计数器++；
}, 10);
}

这很棘手，因为画布不记得你画了什么，而是记得像素颜色。每次都需要重新绘制整个图像。所以我会保存你计算的所有分数，然后使用它们。比如：。@pimvdb太好了，你能给出一个解释代码的答案吗？

<canvas id="mycanvas" width="1000" height="100">
    Your browser is not supported.
</canvas>

var canvas = document.getElementById("mycanvas");
if (canvas.getContext) {
    var ctx = canvas.getContext("2d");
    ctx.lineWidth = 3;
    var x = 0,
        y = 0;
    var timeout = setInterval(function() {
        ctx.beginPath();
        ctx.moveTo(x, y);
        x += 1;
        y = 50 * Math.sin(0.1 * x) + 50;
        ctx.lineTo(x, y);
        ctx.stroke();
        if (x > 1000) {
            clearInterval(timeout);
        }
    }, 10);
}

var canvas = document.getElementById("mycanvas");
var points = {}; // Keep track of the points in an object with key = x, value = y
var counter = 0; // Keep track when the moving code should start

function f(x) {
    return 50 * Math.sin(0.1 * x) + 50;
}

if (canvas.getContext) {
    var ctx = canvas.getContext("2d");
    ctx.lineWidth = 3;
    var x = 0,
        y = f(0);
    var timeout = setInterval(function() {
        if(counter < 100) { // If it doesn't need to move, draw like you already do
            ctx.beginPath();
            ctx.moveTo(x, y);
            points[x] = y;
            x += 1;
            y = f(x);
            ctx.lineTo(x, y);
            ctx.stroke();
            if (x > 1000) {
                clearInterval(timeout);
            }
        } else { // The moving part...
            ctx.clearRect(0, 0, 100, 100); // Clear the canvas
            ctx.beginPath();
            points[x] = y;
            x += 1;
            y = f(x);
            for(var i = 0; i < 100; i++) {
                // Draw all lines through points, starting at x = i + ( counter - 100 )
                // to x = counter. Note that the x in the canvas is just i here, ranging
                // from 0 to 100
                ctx.lineTo(i, points[i + counter - 100]);
            }
            ctx.stroke();
        }
        counter++;
    }, 10);
}