canvas圆形进度球html5水波动画特效

来源:https://www.sucaihuo.com/js/1927.html 2017-05-12 23:17浏览(9708) 收藏

简易实用的canvas圆形进度球,进度百分比可以自由控制,未引用任何jquery库,javascript通过html5的canvas元素绘制生成圆形进度球。
canvas圆形进度球html5水波动画特效
分类:html5 > canvas 难易:初级
查看演示 下载资源 下载积分: 30 积分

范围可以自行设置:min设置最小值,max设置最大值

<input type="range" id="r" min="0" max="100" step="1">
var axisLength = mW; //轴长
var waveWidth = 0.015 ; //波浪宽度,数越小越宽 
var waveHeight = 6; //波浪高度,数越大越高
var speed = 0.09; //波浪速度,数越大速度越快
var xOffset = 0; //波浪x偏移量

修改为双水波、字体颜色有变化的效果如下:

评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2