个人中心
文章发布
退出
作者热门文章
- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
25
4
我的 Canvas 中有一个正弦波，它是动画的，左右摇摆。我想要实现的是起点和终点保持固定。如何实现？
这里是 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>最佳答案
我更改了 Canvas 的大小，因为我希望能够看到它。你可以把它改回你需要的。
我做了两件事:
频率必须是 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 中，该函数将幅度和三 Angular 函数(正弦或余弦)用作参数:
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>关于javascript - 动画正弦波，固定起点和终点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56082963/
25
4
0
我需要用一些数据计算弧长: 起始点坐标(Xs、Ys、Zs) 结束点及坐标(Xe、Ye、Ze) 中心点及坐标(Xc、Yc、Zc) Axis 向量，包含分量(Xa、Ya、Za) Arc 从 Start 点
通常 UICollectionView 在滚动超过它的 contentSize 时开始反弹，即当 contentOffset contentSize.width用于水平方向。 是否可以更改此行为，以
我的要求是，当表格宽度大于当前视口(viewport)时，必须添加左右两个按钮。当用户单击左侧按钮时，表格必须向左移动，同样向右移动。 所以我决定使用 jQuery 动画方法来完成要求。我的挑战是，我
我有一堆坡道，我想知道它们的起点和终点(如果有多个起点/终点，我想知道它们是如何连接的)。我目前将这些作为 List ret = new List(); FilteredElementCollecto
我使用了以下代码，仅输入start_point和end_point: import matplotlib.pyplot as plt from matplotlib.path import Path
我正在尝试从 mapr fs origin 进行简单的数据移动到 mapr fs destination (这不是我的用例，只是为了测试目的做这个简单的 Action )。尝试 validate 时这
我是一名优秀的程序员,十分优秀！