我正在编写一个程序来绘制sine curve
画布。
HTML:
<canvas id="mycanvas" width="1000" height="100">
Your browser is not supported.
</canvas>
JavaScript:
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);
}
这真的很好用:http: //jsfiddle.net/HhGnb/
但是,现在我只能为画布宽度提供 100 像素,因此只能看到曲线最左边的 100 像素。http://jsfiddle.net/veEyM/1/
我想存档这个效果:当曲线的右边点大于画布的宽度时,整个曲线可以向左移动,所以我可以看到最右边的点曲线,有点像曲线向左流动。我可以这样做吗?