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


分享名称:HTML5怎么实现有趣的海浪效果
当前URL:http://scyanting.com/article/jopdei.html