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

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

上升水波.gif动画分析

构成：贝塞尔曲线

画布：Canvas

效果：波浪涨潮(上升、波动)

触发条件：点击按钮

贝塞尔曲线.gif

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

干货开始：

1、创建触发条件(按钮)

οnclick="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 < 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);

};

通过调用自身产生不同的高度，来产生海浪效果。这里设置的属性值配合第四步画贝塞尔曲线一起进行理解。

运行方式 rendY();

总结

贝赛尔曲线也可以制作音波，心跳仪等。可以尝试改变频率值来实现。

【相关推荐】

1. 免费h5在线视频教程

2. HTML5 完整版手册

3. erdangjiade.com原创html5视频教程