三角函数形成简单的波浪

Posted huangqiming

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了三角函数形成简单的波浪相关的知识,希望对你有一定的参考价值。

//定义canvas
var canvas = document.getElementById(‘canvas‘);
var context = canvas.getContext(‘2d‘);
var a = 1;//弧度
var b = 1;//弧度正反的按钮
setInterval(function(){
    context.clearRect(0, 0, canvas.width, canvas.height);//清除画布
    context.beginPath();//开始画坐标
    context.moveTo(0, canvas.height/2)//初始化线的位置
    if(b===1){a++}else{a--}
    if(a>10){b=0}//弧度范围
    if(a<-10){b=1}//弧度范围
    for (let x = 0; x < canvas.width; x++) {
        const y = Math.sin(x*0.01)*a+canvas.height/2//sin控制弧度
        context.lineTo(x, y)//画坐标
    }
    context.stroke()//根据坐标画线
    context.closePath()//结束画坐标
},100)

技术分享图片  

以上是关于三角函数形成简单的波浪的主要内容,如果未能解决你的问题,请参考以下文章

SPH方法模拟波浪及木船漂浮

canvas 怎么sin函数绘制波浪线

vs2010编程时的红色字和波浪线作用是啥?

如何制作从一个元素到另一个元素的波浪线[关闭]

css实现大波浪

css实现大波浪