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

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

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

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