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

效果如图

代码如下：

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