HTML5怎么实现有趣的海浪效果

今天小编给大家分享一下HTML5怎么实现有趣的海浪效果的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

成都创新互联是一家专业提供金林企业网站建设,专注与网站设计、做网站、成都h5网站建设、小程序制作等业务。10年已为金林众多企业、政府机构等服务。创新互联专业网站制作公司优惠进行中。

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

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

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

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

id="Anniu">确 ?     ?    定

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（）;

以上就是“HTML5怎么实现有趣的海浪效果”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注创新互联行业资讯频道。