13518219792
今天小编给大家分享一下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怎么实现有趣的海浪效果”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注创新互联行业资讯频道。
