分享一个利用HTML5制作的海浪效果代码-CSDN博客

在前面简单讲述了一下HTML里的Canvas,这次根据Canvas完成了“海浪效果”（水波上升）。

（O(∩_∩)O哈哈哈~作者我能看这个动画看一下午）

上升水波.gif

动画分析
构成：贝塞尔曲线
画布：Canvas
效果：波浪涨潮（上升、波动）
触发条件：点击按钮

贝塞尔曲线.gif

算法实现分析：从sin（）函数切入，sin()越大波度起伏越大，简单说就是通过不断改变sin()值来实现海浪效果动画

干货开始：

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

 
       < 
       button  
       type 
       = 
       "button" 
      
 
                
       onclick 
       = 
       "Beisizer()" 
       //点击时触发JS事件 
      
 
                
       onmouseover 
       = 
       "bcd()" 
       //鼠标经过时JS事件 
      
 
                
       onmouseleave 
       = 
       "out()" 
       //鼠标离开时JS事件 
      
 
                
       id 
       = 
       "Anniu" 
       >确  &nbsp &nbsp  &nbsp  &nbsp  &nbsp  &nbsp &nbsp  &nbsp  &nbsp  &nbsp  定</ 
       button 
       > 
      

2、创建画布Canvas

1	`<` `canvas` `id` `=` `"Theback"` `></` `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 < sinX +axisLenght;x+=80/axisLenght){ 
      
       // var y = -Math.sin((sinX+x)*waveWidth);  测试请解开注释，注释下一行 
      
       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); 
      
       };