vue 圆形 水波_canvas 水滴图、液体进度条、仿加速球、圆球水波图

传送门：https://github.com/guoyoujin/WaterMoire

test

body {

display: flex;

flex-flow: column wrap;

justify-content: center;

align-items: center;

}

#c {

margin-top: 20px;

}

input[type=range]::before {content: attr(min); color: #000; padding-right: 5px;}

input[type=range]::after { content: attr(max); color: #000; padding-left: 5px;}

当前浏览器不支持canvas 请升级！

let canvas = document.getElementById("c")

let ctx = canvas.getContext("2d")

let oRange = document.getElementsByName("range")[0];

let M = Math

let Sin = M.sin

let Cos = M.cos

let Sqrt = M.sqrt

let Pow = M.pow

let PI = M.PI

let Round = M.round

let oW = canvas.width = 250

let oH = canvas.height = 250

let lineWidth = 2 // 线宽

let r = (oW / 2) // 大半径

let cR = r - 10 * lineWidth

ctx.beginPath()

ctx.lineWidth = lineWidth

// 水波动画初始参数

let axisLength = 2 * r - 16 * lineWidth // Sin 图形长度

let unit = axisLength / 9 // 波浪宽

let range = .4 // 浪幅

let nowrange = range

let xoffset = 8 * lineWidth // x 轴偏移量

let data = ~~(oRange.value) / 100 // 数据量

let sp = 0 // 周期偏移量

let nowdata = 0

let waveupsp = 0.006 // 水波上涨速度

// 圆动画初始参数

let arcStack = [] // 圆栈

let bR = r - 8 * lineWidth

let soffset = -(PI / 2) // 圆动画起始位置

let circleL