canvas 绘制函数

天空之枫

于 2021-04-11 14:25:30 发布

阅读量583

点赞数

CC 4.0 BY-SA版权

分类专栏： canvas js

本文链接：https://blog.csdn.net/sinat_24713805/article/details/115598915

js 同时被 2 个专栏收录

65 篇文章

订阅专栏

canvas

3 篇文章

订阅专栏

本文详细解析了使用正弦函数y=Asin(Bx+C)+D绘制波形的基础原理及参数意义，包括振幅A、周期2Π/B、相移-C/B及垂直位移D的具体作用，并给出了绘制正弦波形的JavaScript核心代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以sin 函数为例

y = Asin(Bx+C)+D;

A 表示振幅，A值越大，振幅越大

周期：2Π/B

相移：-（C/B）,在B不变的情况下，C为正值时曲线向左移动，C为负值时，曲线向右移动

D：是垂直位移，控制曲线上下移动

核心代码：

for(let x = startX;x<startX+canvasWidth;x+=20/canvasWidth){
   const y = waveHeight*Math.sin((startX+x)*waveWidth+xOffset);
   // points.push([x,canvasHeight/2+y]);
   ctx.lineTo(x,(canvasHeight/2)+y);
}