Canvas 制作动态进度加载水球详解及实例代码

Canvas 制作动态进度加载水球详解及实例代码

Canvas 动态进度加载水球

前言

之前看到一些球型的动态加载的效果，一直想自己动手做一个，正好这段时间重温了一个Canvas，所以就尝试了一下。

实现思路

关于水波的实现，使用了sin()函数，通过每一帧不断的移动sin()函数曲线，实现水波动态效果。然后，通过绘制圆形路径，进行clip()，实现球型效果。

sin()函数相关

这里说一下sin()函数的相关基础，对于绘制水波的影响。

看一下图，回顾一下中学sin()函数的基础。

从图中可以看出，当函数为sin(x)时，值域为[-1, 1]，周期为2。

当sin(x)乘以一个数，可以改变值域，也就是峰值，如下图：

系数大于1时曲线更陡峭，小于1大于0时曲线更缓。

当sin(x 某个数)时，实现曲线的左右移动，减时右移，加时左移。

当sin(x * 某个数)时，曲线的周期会变化，某个数大于1时，周期变短；某个数小于1大于0时，bdBucacPvg周期变长。

在一点，sin()是一个周期函数，所以只要不断的给它值，它就会周期变化。

好了，sin()的数学基础差不多了，接下来开始步入正题。

绘制 sin() 曲线

var canvas = document.getElementById('c');

var ctx = canvas.getContext('2d');

//画布属性

var mW = canvas.width = 700;

var mH = canvas.height = 300;

var lineWidth = 1;

//Sin 曲线属性

var sX = 0;

var sY = mH / 2;

var axisLength = mW; //轴长

var waveWidth = 0.011 ; //波浪宽度,数越小越宽

var waveHeight = 70; //波浪高度,数越大越高

ctx.lineWidth = lineWidth;

//画sin 曲线函数

var drawSin = function(xOffset){

ctx.save();

var points=[]; //用于存放绘制Sin曲线的点

ctx.beginPath();

//在整个轴长上取点

for(var x = sX; x < sX + axisLength; x += 20 / axisLength){

//此处坐标(x,y)的取点，依靠公式 “振幅高*sin(x*振幅宽 + 振幅偏移量)”

var y = -Math.sin((sX + x) * waveWidth);

points.push([x, sY + y * waveHeight]);

ctx.lineTo(x, sY + y * waveHeight);

}

//封闭路径

ctx.lineTo(axisLength, mH);

ctx.lineTo(sX, mH);

ctx.lineTo(points[0][0],points[0][1]);

ctx.stroke()

ctx.restore();

};

drawSin()

此处通过waveWidth和waveHeight调节曲线的陡峭度和周期。

加入动态效果

var speed = 0.04; //波浪速度，数越大速度越快

var xOffset = 0; //波浪x偏移量

速度变量和x偏移变量

var y = -Math.sin((sX + x) * waveWidth + xOffset);

修改y点的函数。

var render = function(){

ctx.clearRect(0, 0, mW, mH);

drawSin(xOffset);

xOffset += speed; //形成动态效果

requestAnimationFrame(render);

}

render()

加入渲染。

百分比控制

因为要加入百分比不同的涨幅效果，所以要对y的坐标时行百分比控制修改。

var dY = mH * (1 - nowRange / 100 );

球型显示

这里需要用到clip()进行球型裁切显示。

ctx.beginPath();

ctx.arc(r, r, cR, 0, 2 * Math.PI);

ctx.clip();

其他

可以通过修改如下变量来修改曲线的形状以及速度：

var waveWidth = 0.015 ; //波浪宽度,数越小越宽

var waveHeight = 6; //波浪高度,数越大越高

var speed = 0.09; //波浪速度，数越大速度越快

完整代码

效果

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。