在 HTML canvas 中绘制六边形后，如何在 javascript 中生成六边形波并为其设置动画？

Question

在尝试了正弦和余弦波动画之后，我在为具有旋转半径的六角波设置动画时遇到了问题。 我无法在波浪中获得正确的角度。

 var hexStep = 0; var hexID; function drawAxes(context) { var width = context.canvas.width; var height = context.canvas.height; context.beginPath(); context.strokeStyle = "rgb(128,128,128)"; context.lineWidth = 1; // X-axis context.moveTo(0, height / 2); context.lineTo(width, height / 2); // Sine Wave starting wall context.moveTo(width / 4, 0); context.lineTo(width / 4, height); // Sine Wave Y-axis context.moveTo((2.5 * width) / 4, 0); context.lineTo((2.5 * width) / 4, height); // Shape Y-axis context.moveTo(width / 8, 0); context.lineTo(width / 8, height); context.stroke(); } // Hexagon function drawHexagon(context, x, y, r, side) { var width = context.canvas.width; var height = context.canvas.height; var angle = (2 * Math.PI) / side; context.beginPath(); context.strokeStyle = "midnightblue"; context.lineWidth = 2; context.moveTo(x + r, y); var hx = 0; var hy = 0; for (var i = 1; i <= side; i++) { hx = x + r * Math.cos(angle * i); hy = y + r * Math.sin(angle * i); context.lineTo(hx, hy); } context.stroke(); } function getHexagonalWave(context, x, y, r, side, step, freq) { var width = context.canvas.width; var height = context.canvas.height; var angle = (2 * Math.PI) / side; var inr = r * Math.sqrt(0.75); context.beginPath(); context.strokeStyle = "midnightblue"; context.lineWidth = 2; context.moveTo(x, y); var sf = step / freq; var hr = inr / Math.cos(((sf + angle / 2) % angle) - angle / 2); var hx = x + hr * Math.sin(sf); var hy = y - hr * Math.cos(sf); context.lineTo(hx, hy); var wx = width / 4; context.moveTo(hx, hy); context.lineTo(wx, hy); context.moveTo(wx, hy); var hvr = 0; var wvx = 0; var wvy = 0; var id = 0; for (var i = 0; i < width; i++) { hvr = inr / Math.cos((((i + step) / freq + angle / 2) % angle) - angle / 2); wvy = y - hvr * Math.cos((i + step) / freq); wvx = wx + hvr * Math.sin((i + step) / freq); context.lineTo(wx + i, wvy); } context.stroke(); } function doGenerateHexagonalWave() { var canvas = document.getElementById("canvas3"); var context = canvas.getContext("2d"); var width = canvas.width; var height = canvas.height; var x = width / 8; var y = height / 2; var r = (1.5 * height) / 4; var side = 6; var freq = 60; context.clearRect(0, 0, width, height); // Check drawAxes(context); drawHexagon(context, x, y, r, side); getHexagonalWave(context, x, y, r, side, hexStep, freq); hexStep++; hexID = window.requestAnimationFrame(doGenerateHexagonalWave); } function doStopHexagonalWave() { window.cancelAnimationFrame(hexID); } function doClearHexagonalWave() { window.cancelAnimationFrame(hexID); var canvas = document.getElementById("canvas3"); var context = canvas.getContext("2d"); var width = canvas.width; var height = canvas.height; context.clearRect(0, 0, width, height); }

 body { background-color:darkgray; margin-left: 10px; } h1 { margin: 5px; } hr { border: 1px solid; } canvas { margin: 5px; margin-bottom: -8px; background-color:lightgrey; /* width: 500px; height: 100px; */ } p { margin-left: 5px; }

 <h1>Hexagonal Wave</h1> <hr> <div> </p> <canvas id="canvas3" width="800" height="200"> </canvas> <p> <input type="button" value="Generate" onclick="doGenerateHexagonalWave()"/> <input type="button" value="Stop" onclick="doStopHexagonalWave()" /> <input type="button" value="Clear" onclick="doClearHexagonalWave()" /> </p> </div>

如何通过在 for 循环中使用变量“wvx”来获得在波的顶点之间形成直边的角度？ 好像想不通！