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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>test</title>

    <style>

        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;}

    </style>

</head>

<body>

    <canvas id="c">当前浏览器不支持canvas 请升级！</canvas>

    <input type="range" name="range" min="0" max="100" step="1">

</body>

<script>

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)

}

</script>

canvas 水滴图、液体进度条、仿加速球、圆球水波图的更多相关文章

  1. canvas绘制百分比圆环进度条

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

  2. canvas实现半圆环形进度条

    html部分 <canvas id="canvas" width="150" height="150"> <p>抱歉 ...

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

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

  4. canvas三环加载进度条

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

  5. canvas的简单圆形进度条

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

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

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

  7. canvas 绘制动态圆环进度条

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

  8. 通过DIV+span方式模拟进度条的实现方法

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

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

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

随机推荐

  1. POJ 3281 Dining (拆点)【最大流】

    <题目链接> 题目大意: 有N头牛,F种食物,D种饮料,每一头牛都有自己喜欢的食物和饮料,且每一种食物和饮料都只有一份,让你分配这些食物和饮料,问最多能使多少头牛同时获得自己喜欢的食物和饮 ...

  2. BZOJ-1- 4868: [Shoi2017]期末考试-三分

    三分出成绩时间,假设当前出成绩最优,那么提前就会调增老师,增加不愉快度多于少等待的:如果延迟时间. 那么等待更久,增加的不愉快度也将多余少调增剩省下的. 于是:对于当前点,两边都是有单调性的. 就是说 ...

  3. SpringMVC(二四) 视图解析流程

    目标方法无论返回的是string.ModelAndView.View,最终都被解析成modelAndView 关键的实现代码是在springmvc.xml配置文件中定义解析器. 参考代码如下: < ...

  4. 使用SpringSecurity

    前几天写了一个SpringBoot对拦截器的使用,在实际项目中,对一些情况需要做一些安全验证,比如在没有登录的情况下访问特定的页面应该解释的拦截处理.这一篇介绍使用SpringSecurity来做简单 ...

  5. 杭电ACM1285----确定比赛名次『拓扑排序』

    //裸拓扑排序,注意先输出比较小的数,使用优先队列即可 #include <cstdio> #include <vector> #include <cstring> ...

  6. 虚拟主机的IIS连接数和访问流量限制各是什么

    网址:http://zhidao.baidu.com/question/40279863IIS连接数,就是你的网站同时允许多少个人连接你的网站.IIS连接数为100就是,同时允许100人连接你的网站, ...

  7. Codeforces.954I.Yet Another String Matching Problem(FFT)

    题目链接 \(Description\) 对于两个串\(a,b\),每次你可以选择一种字符,将它在两个串中全部变为另一种字符. 定义\(dis(a,b)\)为使得\(a,b\)相等所需的最小修改次数. ...

  8. 克罗内克符号kronecker_delta

    Kronecker delta 克罗内克函数 Wiki 维基百科 Kronecker delta 定义 \[\delta _{{ij}}={\begin{cases}0&{\text{if } ...

  9. 通过Quartz 配置定时调度任务：使用cron表达式配置时间点

    Cron官网入口 在后台经常需要一些定时处理的任务,比如微信相关应用所需的access_token,就要定时刷新,官方返回的有效性是7200s,也就是2小时,但是为了保险起见,除了在发现access_ ...

  10. [P1005][NOIP2007] 矩阵取数游戏 (DP+高精)

    我不会高精…… 也不会DP…… 这道题即考高精又考DP…… 我要死了 给一个不是高精的代码(当然不能满分) #include<cstdio> #include<iostream> ...