gpt4 book ai didi

javascript - 如何用canvas画一条可以向左移动的曲线?

转载 作者:搜寻专家 更新时间:2023-11-01 04:58:39 28 4
gpt4 key购买 nike

我正在编写一个程序,用 Canvas 绘制正弦曲线
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 的 Canvas 宽度,所以只能看到曲线最左边的 100px。 http://jsfiddle.net/veEyM/1/
我想存档这个效果:当曲线右边的点大于 Canvas 的宽度时,整个曲线可以向左移动,所以我可以看到曲线的最右边的点,有点像曲线向左流动.我可以这样做吗?

最佳答案

<canvas> 的基本思想之一元素是计算机“忘记”绘图命令,只保存像素,就像位图一样。因此,要将所有内容移动到左侧,您需要清除 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);
}

关于javascript - 如何用canvas画一条可以向左移动的曲线?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6032998/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com