html5圆形中心水,html5 canvas制作圆形水波进度条动画特效

特效描述：html5 canvas制作 圆形水波 进度条动画特效。纯canvas制作的水波纹进度条动画，支持拖到设置水波进度条大小代码

代码结构

1. HTML代码

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

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

var range = document.getElementById('r');

//range控件信息

var rangeValue = range.value;

var nowRange = 0; //用于做一个临时的range

//画布属性

var mW = canvas.width = 250;

var mH = canvas.height = 250;

var lineWidth = 2;

//圆属性

var r = mH / 2; //圆心

var cR = r - 16 * lineWidth; //圆半径

//Sin 曲线属性

var sX = 0;

var sY = mH / 2;

var axisLength = mW; //轴长

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

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

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

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

ctx.lin