问题描述
我正在尝试使正弦曲线缓慢移动并连续出现,就像这样(右侧的):
有可能吗?如果是这样,我将如何处理?
解决方法
绘制正弦波的 JavaScript 函数使用 Math.sin()
函数,该函数在 y 轴上给定不同起点时重复调用。请参阅下面的简单图。在这种情况下,draw()
函数通过 window.requestAnimationFrame(draw).
function draw() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.clearRect(0,500,500);
showAxes(context);
context.save();
plotSine(context,step,50);
context.restore();
step += 4;
window.requestAnimationFrame(draw);
}
还有一些需要补充的,自己去理解吧。
最终代码
<!DOCTYPE html>
<html>
<head>
<title>Sine Wave</title>
<script type="text/javascript">
function showAxes(ctx,axes) {
var width = ctx.canvas.width;
var height = ctx.canvas.height;
var xMin = 0;
ctx.beginPath();
ctx.strokeStyle = "rgb(128,128,128)";
// X-Axis
ctx.moveTo(xMin,height/2);
ctx.lineTo(width,height/2);
// Y-Axis
ctx.moveTo(width/2,0);
ctx.lineTo(width/2,height);
// Starting line
ctx.moveTo(0,0);
ctx.lineTo(0,height);
ctx.stroke();
}
function drawPoint(ctx,y) {
var radius = 3;
ctx.beginPath();
// Hold x constant at 4 so the point only moves up and down.
ctx.arc(4,y,radius,2 * Math.PI,false);
ctx.fillStyle = 'red';
ctx.fill();
ctx.lineWidth = 1;
ctx.stroke();
}
function plotSine(ctx,xOffset,yOffset) {
var width = ctx.canvas.width;
var height = ctx.canvas.height;
var scale = 20;
ctx.beginPath();
ctx.lineWidth = 2;
ctx.strokeStyle = "rgb(66,44,255)";
// console.log("Drawing point...");
// drawPoint(ctx,yOffset+step);
var x = 4;
var y = 0;
var amplitude = 40;
var frequency = 20;
//ctx.moveTo(x,y);
ctx.moveTo(x,50);
while (x < width) {
y = height/2 + amplitude * Math.sin((x+xOffset)/frequency);
ctx.lineTo(x,y);
x++;
// console.log("x="+x+" y="+y);
}
ctx.stroke();
ctx.save();
console.log("Drawing point at y=" + y);
drawPoint(ctx,y);
ctx.stroke();
ctx.restore();
}
function draw() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.clearRect(0,500);
showAxes(context);
context.save();
plotSine(context,50);
context.restore();
step += 4;
window.requestAnimationFrame(draw);
}
function spirograph() {
var canvas2 = document.getElementById("canvas2");
var context = canvas2.getContext("2d");
showAxes(context);
context.save();
// var imageData = context.getImageData(0,canvas.width,canvas.height);
var step = 4;
for (var i = -4; i < canvas.height; i += step) {
// context.putImageData(imageData,0);
plotSine(context,i,54 + i);
}
}
function init() {
window.requestAnimationFrame(draw);
spirograph();
}
var step = -4;
</script>
</head>
<body onload="init()">
<h3>Oscillating Sine Wave</h3>
<canvas id="canvas" width="500" height="100"></canvas>
<p/>
<h3>Multiple Sine Waves</h3>
<canvas id="canvas2" width="500" height="100"/>
</body>
</html>