kon*_*ban 8 javascript html5-canvas sine-wave
我的画布上有一个正弦波，它是动画的，左右摇摆。我想要实现的是，起点和终点保持固定。如何实现呢？
这是密码笔
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>我已经更改了画布的大小，因为我希望能够看到它。您可以将其更改回所需的内容。
我做了两件事：
频率必须为 var frequency = height / (2 * Math.PI);或 var frequency = height / (4 * Math.PI);。除数必须是2 * Math.PI的倍数
我将相反方向的上下文翻译成相同量： ctx.translate(-amplitude * Math.sin(step / frequency), 0);
如果您需要更细微的振荡，请使用振幅。
在我的代码中，有一条注释掉了，ctx.closePath()请取消注释该行以清楚地看到正弦波保持固定在中心。我希望这就是你的要求。
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
function start() {
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 = 0;
var y = 0;
var amplitude = 10;
var frequency = height / (2 * Math.PI);
ctx.save();
ctx.translate(-amplitude * Math.sin(step / frequency), 0);
while (y < height) {
x = width / 2 + amplitude * Math.sin((y + step) / frequency);
ctx.lineTo(x, y);
y++;
}
//ctx.closePath();
ctx.stroke();
ctx.restore();
}
start();canvas {
background-color: wheat;
}
div {
width: 100px;
height: 400px;
border: solid;
}<div class="box">
<canvas id="canvas" width="100" height="400"></canvas>
</div>如果需要使用多条曲线，可以这样进行：
我将绘制波的所有功能放在一个函数中drawWave，该函数采用振幅和三角函数（正弦或余弦）作为参数：
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var width = ctx.canvas.width;
var height = ctx.canvas.height;
var step = -4;
function start() {
window.requestAnimationFrame(start);
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawWave(10,"sin");
drawWave(10,"cos");
drawWave(5,"sin");
step += 5;
}
function drawWave(amplitude,trig){
// trig is the trigonometric function to be used: sin or cos
ctx.beginPath();
ctx.lineWidth = 2;
ctx.strokeStyle = "rgb(66,44,255)";
var x = 0;
var y = 0;
//var amplitude = 10;
var frequency = height / (2 * Math.PI);
ctx.save();
ctx.translate(-amplitude * Math[trig](step / frequency), 0);
while (y < height) {
x = width / 2 + amplitude * Math[trig]((y + step) / frequency);
ctx.lineTo(x, y);
y++;
}
ctx.stroke();
ctx.restore();
}
start();canvas {
background-color: wheat;
}
div {
width: 100px;
height: 400px;
border: solid;
}<div class="box">
<canvas id="canvas" width="100" height="400"></canvas>
</div>| 归档时间： |
|
| 查看次数： |
193 次 |
| 最近记录： |