我在画布上有一个正弦波,正在进行动画播放,左右摇摆。我想要实现的是始点和终点保持不变。如何实现这个目标?
这里是Code Pen。
这里是Code Pen。
function start() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.clearRect(0, 0, canvas.width, canvas.height);
drawCurves(context, step);
step += 5;
window.requestAnimationFrame(start);
}
var step = -4;
function drawCurves(ctx, step) {
var width = ctx.canvas.width;
var height = ctx.canvas.height;
ctx.beginPath();
ctx.lineWidth = 2;
ctx.strokeStyle = "rgb(66,44,255)";
var x = 4;
var y = 0;
var amplitude = 20;
var frequency = 90;
while (y < height) {
x = width / 2 + amplitude * Math.sin((y + step) / frequency);
ctx.lineTo(x, y);
y++;
}
ctx.stroke();
}
canvas {
background-color: wheat;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body onload="start()">
<canvas id="canvas" width="500" height="2000"></canvas>
</body>
</html>
closePath()
? I'm not sure I understand you. If you want to have different color waves you can add a third argument to thedrawWave
function: the color. And you can use this color for thestrokeStyle
- enxaneta