我正在编写一个用画布绘制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/
然而,现在我只能为画布宽度提供100px,所以只能看到曲线的最低100px。 http://jsfiddle.net/veEyM/1/
我想归档这种效果:当曲线的右边点大于画布的宽度时,整条曲线可以向左移动,所以我可以看到曲线的最右点,有点像曲线向左流动。我能这样做吗?
答案 0 :(得分:11)
<canvas>
元素的基本思想之一是计算机“忘记”绘图命令并仅保存像素,如位图。因此,要将所有内容移到左侧,您需要清除画布并再次绘制所有内容。
还有一件事我想建议你 - 你总是从x = 0和y = 0开始,但显然在x = 0时,y也不一定等于0。编辑:实现了这一点。
无论如何,我最终得到了这段代码:http://jsfiddle.net/veEyM/5/
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);
}