javascript - 画布正弦波方向
问题描述
我试图在画布上绘制一个简单的正弦波,但我无法将动画的方向更改为垂直(从上到下)。告诉我我该怎么做?
Javascript代码
var c = document.getElementById('canv');
var $ = c.getContext('2d');
var w = c.width = window.innerWidth;
var h = c.height = window.innerHeight;
var lineOffset = 60;
var draw = function(a, b, t) {
$.clearRect(0, 0, w, h);
$.lineWidth = 0.2;
for (var i = -70; i < 70; i += 1) {
$.strokeStyle = 'red';
$.beginPath();
$.moveTo(0, h / 2);
for (var j = 0; j < w; j += 10) {
$.lineTo(lineOffset * Math.sin(i / 10) +
j + 0.008 * j * j,
Math.floor(h / 2 + j / 2 *
Math.sin(j / 50 - t / 50 - i / 118) +
(i * 0.9) * Math.sin(j / 25 - (i + t) / 65)));
};
$.stroke();
}
}
var t = 0;
var run = function() {
window.requestAnimationFrame(run);
t += 2;
draw(33, 52 * Math.sin(t / 2400), t);
};
run();
<canvas id='canv'></canvas>
解决方案
在绘图函数中,我用 h 更改了 w,反之亦然。
我已经$.moveTo(0,h / 2)
改为$.moveTo(w / 2,0);
在 for 循环中,我将 x 的值更改为 y 的值,反之亦然。
我希望这是你需要的。
var c = document.getElementById('canv');
var $ = c.getContext('2d');
var w = c.width = window.innerWidth;
var h = c.height = window.innerHeight;
var lineOffset = 60;
var draw = function(a, b, t) {
$.clearRect(0, 0, w, h);
$.lineWidth = 0.2;
for (var i = -70; i < 70; i += 1) {
$.strokeStyle = 'red';
$.beginPath();
$.moveTo(w / 2,0);
/*
for (var j = 0; j < w; j += 10) {
$.lineTo(lineOffset * Math.sin(i / 10) +
j + 0.008 * j * j,
Math.floor(h / 2 + j / 2 *
Math.sin(j / 50 - t / 50 - i / 118) +
(i * 0.9) * Math.sin(j / 25 - (i + t) / 65)));
};
*/
for (var j = 0; j < h; j += 10) {
let y = lineOffset * Math.sin(i / 10) +
j + 0.008 * j * j;
let x = Math.floor(w / 2 + j / 2 *
Math.sin(j / 50 - t / 50 - i / 118) +
(i * 0.9) * Math.sin(j / 25 - (i + t) / 65))
$.lineTo(x,y);
};
$.stroke();
}
}
var t = 0;
var run = function() {
window.requestAnimationFrame(run);
t += 2;
draw(33, 52 * Math.sin(t / 2400), t);
};
run();
<canvas id='canv'></canvas>
推荐阅读
- python - pyspark sql 为展开的行添加不同的 Qtr start_date、End_date
- python - 当在 shell 脚本中调用 python 脚本时,将变量从 python 脚本传递到 shell 脚本
- oracle - 导航栏列表中的应用程序项 - Oracle Apex
- sql - BigQuery:需要一个聪明的解决方案来解决困难的查询
- sql - 仅对每个 Id 的最新值求和
- python - 下划线文本/加粗:python:RuntimeError:无法用tex处理字符串,因为找不到乳胶
- python-3.x - 如何根据列值有效地迭代熊猫数据框
- rabbitmq - 当 RabbitMQ 无法路由消息时,Publisher Confirms 给出 ACK
- java - SQLite 不更新日期值
- python - 找不到 64 位 Oracle 客户端库