传送门：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 circleLock = true // 起始动画锁

// 获取圆动画轨迹点集

for (var i = soffset; i < soffset + 2 * PI; i += 1 / (8 * PI)) {

arcStack.push([

r + bR * Cos(i),

r + bR * Sin(i)

])

}

// 圆起始点

let cStartPoint = arcStack.shift();

ctx.strokeStyle = "#1c86d1";

ctx.moveTo(cStartPoint[0], cStartPoint[1]);

// 开始渲染

render();

function drawSine() {

ctx.beginPath();

ctx.save();

var Stack = []; // 记录起始点和终点坐标

for (var i = xoffset; i <= xoffset + axisLength; i += 20 / axisLength) {

var x = sp + (xoffset + i) / unit;

var y = Sin(x) * nowrange;

var dx = i;

var dy = 2 * cR * (1 - nowdata) + (r - cR) - (unit * y);

ctx.lineTo(dx, dy);

Stack.push([dx, dy])

}

// 获取初始点和结束点

var startP = Stack[0]

var endP = Stack[Stack.length - 1]

ctx.lineTo(xoffset + axisLength, oW);

ctx.lineTo(xoffset, oW);

ctx.lineTo(startP[0], startP[1])

ctx.fillStyle = "#fbec99";

ctx.fill();

ctx.restore();

}

function drawText() {

ctx.globalCompositeOperation = 'source-over';

var size = 0.4 * cR;

ctx.font = 'bold ' + size + 'px Microsoft Yahei';

let txt = (nowdata.toFixed(2) * 100).toFixed(0) + '`%';

var fonty = r + size / 2;

var fontx = r - size * 0.8;

ctx.fillStyle = "#f6b71e";

ctx.textAlign = 'center';

ctx.fillText(txt, r + 5, r + 20)

}

//最外面淡黄色圈

function drawCircle() {

ctx.beginPath();

ctx.lineWidth = 15;

ctx.strokeStyle = '#fff89d';

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

ctx.stroke();

ctx.restore();

}

//灰色圆圈

function grayCircle() {

ctx.beginPath();

ctx.lineWidth = 10;

ctx.strokeStyle = '#eaeaea';

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

ctx.stroke();

ctx.restore();

ctx.beginPath();

}

//橘黄色进度圈

function orangeCircle() {

ctx.beginPath();

ctx.strokeStyle = '#fbdb32';

//使用这个使圆环两端是圆弧形状

ctx.lineCap = 'round';

ctx.arc(r, r, cR - 5, 0 * (Math.PI / 180.0) - (Math.PI / 2), (nowdata * 360) * (Math.PI / 180.0) - (Math.PI / 2));

ctx.stroke();

ctx.save()

}

//裁剪中间水圈

function clipCircle() {

ctx.beginPath();

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

ctx.clip();

}

//渲染canvas

function render() {

ctx.clearRect(0, 0, oW, oH);

//最外面淡黄色圈

drawCircle();

//灰色圆圈

grayCircle();

//橘黄色进度圈

orangeCircle();

//裁剪中间水圈

clipCircle();

// 控制波幅

oRange.addEventListener("change", function() {

data = ~~(oRange.value) / 100;

}, 0);

if (data >= 0.85) {

if (nowrange > range / 4) {

var t = range * 0.01;

nowrange -= t;

}

} else if (data <= 0.1) {

if (nowrange < range * 1.5) {

var t = range * 0.01;

nowrange += t;

}

} else {

if (nowrange <= range) {

var t = range * 0.01;

nowrange += t;

}

if (nowrange >= range) {

var t = range * 0.01;

nowrange -= t;

}

}

if ((data - nowdata) > 0) {

nowdata += waveupsp;

}

if ((data - nowdata) < 0) {

nowdata -= waveupsp

}

sp += 0.07;

// 开始水波动画

drawSine();

// 写字

drawText();

requestAnimationFrame(render)

}

canvas绘制百分比圆环进度条

开发项目,PM会跟踪项目进度:完成某个事情,也可以设置一个完成的进度. 这里用canvas绘制一个简单百分比圆环进度条. 看下效果: 1. 动画方式   2. 静默方式   // 贴上代码,仅供参考 ...

canvas实现半圆环形进度条

html部分

抱歉 ...

Qt实现炫酷启动图-动态进度条

目录 一.简述 二.动效进度条 1.光效进度条 2.延迟到达进度条 3.接口说明 三.启动图 1.实现思路 2.背景图切换 四.测试 1.构造启动图 2.背景图 3.其他信息 4.事件循环 五.源码 ...

canvas三环加载进度条

之前做了一个三个圆形叠加在一起的加载,用的是定位和cile来操作,但是加载的头部不能是圆形.后来用canvas做了一个,但是这个加载的进度不好调整,原理很简单,就是让一个圆,按照圆形轨迹进行运动就可以 ...

canvas的简单圆形进度条

window.onload = function(){ function arc(canvas,number){ var canvas = document.getElementById(canvas ...

第五周 PSP 燃尽图 以及 进度条总结

1.PSP DATE START-TIME END-TIME EVENT           DELTA TYPE 3.12 9.30 11.30 环境搭建 音乐30min QQ25min       ...

canvas 绘制动态圆环进度条

由于使用的是vue开发,所以就展示一下绘制函数好了,上图是效果图 drawMain(drawing_elem, percent, forecolor, bgcolor) { /* @drawing_e ...

通过DIV&plus;span方式模拟进度条的实现方法

上上周用FusionCharts做报表时,有个图是进度条的形式,其实在FusionCharts 3.0之后已经支持了(Linear Gauge),可惜现有系统用的还是1.2.3版本的,重新引入新版本有 ...

BootStrap入门教程 &lpar;三&rpar; ：可重用组件(按钮，导航，标签，徽章，排版，缩略图，提醒，进度条，杂项)

上讲回顾:Bootstrap的基础CSS(Base CSS)提供了优雅,一致的多种基础Html页面要素,包括排版,表格,表单,按钮等,能够满足前端工程师的基本要素需求. Bootstrap作为完整的前 ...

随机推荐

Git Day03&comma;GitHub 1st

1st, SSH key: Add a pic @ Sep 18 2016 20:26 To note the configuration process on Linux: 2nd,github网站 ...

LINQ延迟查询的例子

//linq延迟查询.两次查询结果不同 List l = new List() { "aaa", "bbb&quo ...

&lpar;转&rpar;Sencha Touch和jQuery Mobile的比较

原文:http://extjs.org.cn/node/664 Sencha Touch和jQuery Mobile的比较 Posted 周三, 08/07/2013 - 10:07 by admin ...

skinned mesh 蜘蛛样

被skinned mesh 折磨了 好久,开始感觉skinindices不对,因为pix显示里面全是0 后来跟来跟去发现是这样的,那些uchar的整数被pix用float的格式显示出来 (显示为0.0 ...

php中url传递中文字符&comma;特殊危险字符的解决方法

php中的urldecode,base64_encode函数然后再结合自己写的替换函数来进行安全传递url中文字符,特殊危险字符. 需要在url中传递中文字符或是其它的html等特殊字符,似乎总会有各 ...

linux下安装php的swoole扩展模块(安装后php加载不出来？)

应开发同事要求,需要安装php的扩展模块swoole.swoole是一种PHP高级Web开发框架,框架不是为了提升网站的性能,而是为了提升网站的开发效率,以最少的性能损耗,换取最大的开发效率. 假设服 ...

c&plus;&plus;清除输入缓冲区之 sync&lpar;&rpar; vs ignore&lpar;&rpar;

最近在写程序的时候总是不注意输入缓冲区内是否还有东西,导致出现了一些异常,调试了半天.所以来上一贴,学习注意,引以为戒! http://blog.chinaunix.net/uid-21254310- ...

Drawer&lowbar;layout 关闭滑动视图

在android抽屉Drawer_layout开发中,我需要关闭滑动的试图 找到了这个方法 mDrawer_layout.setDrawerLockMode(DrawerLayout.LOCK_MOD ...

Kali for Android

使用设备:小米平板1 材料:Complete Linux Installer(好像是这个名字,很多应用商店都能下载,所以我就不用送上链接了) 进入app之后,按照着提示做就是了.关于镜像,也是在app ...

19 Handler 总结

Handler 一, 回顾异步任务 AsyncTask 二, android 使用线程的规则 1,在主线程 不能做阻塞操作 2,在主线程之外的线程不能更新Ui 三, Handler的作用 1,在子线程 ...