1、创建触发条件（按钮）

 

　　="Beisizer（）"//点击时触发JS事件

 

　　οnmοuseοver="bcd（）"//鼠标经过时JS事件

 

　　οnmοuseleave="out（）"//鼠标离开时JS事件

 

　　id="Anniu">确&nbsp?&nbsp&nbsp&nbsp&nbsp&nbsp?&nbsp&nbsp&nbsp&nbsp定

 

　　2、创建画布Canvas

 

　　3、创建JS事件（属性设置）//获取画布

 

　　var?beisizer?=?document.getElementById（"Theback"）;?var?ContenofBeisizer?=?beisizer.getContext（"2d"）;?//设置波浪海域（海浪宽度，高度）

 

　　var?beisizerwidth?=?beisizer.width;?var?beisizerheight?=?beisizer.height;?var?beisizerlinewidth?=?2;//曲线

 

　　var?sinX?=?0;?var?sinY?=?beisizerheight/2.0;//轴长

 

　　var?axisLenght?=?beisizerwidth;//弧度宽度

 

　　var?waveWidth?=?0.014;//海浪高度

 

　　var?waveHeight?=?beisizerheight?/?15.0;

 

　　ContenofBeisizer.lineWidth?=?beisizerlinewidth;

 

　　4、画贝塞尔曲线var?drawSin?=?function?（xofspeed）？{

 

　　ContenofBeisizer.save（）;//存放贝塞尔曲线的各个点

 

　　var?points?=?[];

 

　　ContenofBeisizer.beginPath（）;//创建贝塞尔点

 

　　for?（var?x?=?sinX;x?

 

　　var?y?=?-Math.sin（（sinX+x）*waveWidth+xofspeed）;//?points.push（[x,sinY?+?y?*?waveHeight]）;?测试请解开注释，注释下一行

 

　　points.push（[x,rand+y*waveHeight]）;

 

　　//ContenofBeisizer.lineTo（x,sinY?+?y?*?waveHeight）;测试请解开注释，注释下一行

 

　　ContenofBeisizer.lineTo（x,rand?+?y?*?waveHeight）;

 

　　}

 

　　ContenofBeisizer.lineTo（axisLenght,beisizerheight）;

 

　　ContenofBeisizer.lineTo（sinX,beisizerheight）;

 

　　ContenofBeisizer.lineTo（points[0][0],points[0][1]）;

 

　　ContenofBeisizer.stroke（）;

 

　　ContenofBeisizer.restore（）;?//贝塞尔曲线样式设置

 

　　ContenofBeisizer.strokeStyle?=?"#3bc777";

 

　　ContenofBeisizer.fillStyle?=?"#3bc777";

 

　　ContenofBeisizer.fill（）;

 

　　};这一段代码已经完成静态贝赛尔曲线的绘制了，可以通过解开以下语句尝试运行看下效果。

 

　　var y = -Math.sin（（sinX+x）*waveWidth）;

 

　　points.push（[x,rand+y*waveHeight]）;

 

　　var y = -Math.sin（（sinX+x）*waveWidth+xofspeed）;

 

　　运行方法执行 drawSin（）

 

　　静态贝塞尔曲线。png

 

　　5、海浪效果的实现

 

　　需要在属性中加入一下代码进行速率的设置

 

　　var speed = 0.1; 数值越大速率越快

 

　　var xofspeed = 0; ?波浪横向的偏移量

 

　　var rand = beisizerheight;波浪高度var?rendY?=?function?（）？{

 

　　ContenofBeisizer.clearRect（0,0,beisizerwidth,beisizerheight）;//控制海浪高度

 

　　var?tmp?=?0.1;

 

　　rand-=tmp;var?b?=?beisizerheight?-?rand;

 

　　//控制循环涨潮

 

　　if?（parseInt（b）==beisizerheight）{

 

　　rand?=?beisizerheight;

 

　　}

 

　　drawSin（xofspeed）;

 

　　drawSinl（xofspeed）;

 

　　xofspeed?+=?speed;

 

　　requestAnimationFrame（rendY）;

 

　　};通过调用自身产生不同的高度，来产生海浪效果。这里设置的属性值配合第四步画贝塞尔曲线一起进行理解。

 

　　运行方式 rendY（）;

 

　　总结

 

　　贝赛尔曲线也可以制作音波，心跳仪等。可以尝试改变频率值来实现。