canvas 水滴图、液体进度条、仿加速球、圆球水波图
传送门: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 水滴图、液体进度条、仿加速球、圆球水波图的更多相关文章
- canvas绘制百分比圆环进度条
开发项目,PM会跟踪项目进度:完成某个事情,也可以设置一个完成的进度. 这里用canvas绘制一个简单百分比圆环进度条. 看下效果: 1. 动画方式 2. 静默方式 // 贴上代码,仅供参考 ...
- canvas实现半圆环形进度条
html部分 <canvas id="canvas" width="150" height="150"> <p>抱歉 ...
- 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+span方式模拟进度条的实现方法
上上周用FusionCharts做报表时,有个图是进度条的形式,其实在FusionCharts 3.0之后已经支持了(Linear Gauge),可惜现有系统用的还是1.2.3版本的,重新引入新版本有 ...
- BootStrap入门教程 (三) :可重用组件(按钮,导航,标签,徽章,排版,缩略图,提醒,进度条,杂项)
上讲回顾:Bootstrap的基础CSS(Base CSS)提供了优雅,一致的多种基础Html页面要素,包括排版,表格,表单,按钮等,能够满足前端工程师的基本要素需求. Bootstrap作为完整的前 ...
随机推荐
- linux抓包工具Charles的配置安装
1. 安装 (不赘述,方法很多,我使用yaourt charles安装) 2. 导出证书,crt格式保存备用 3. 浏览器导入证书 4. 浏览器设置代理
- Springmvc借助SimpleUrlHandlerMapping实现接口开关功能
一.接口开关功能 1.可配置化,依赖配置中心 2.接口访问权限可控 3.springmvc不会扫描到,即不会直接的将接口暴露出去 二.接口开关使用场景 和业务没什么关系,主要方便查询系统中的一些状态信 ...
- C# 控制左右声道
private void button1_Click(object sender, EventArgs e) { axWindowsMediaPlayer1.settings.balance = -; ...
- jquery中,使用append增加新元素时,新增元素的绑定监听事件失效的解决办法
$("outerSelector").on("eventType","innerSelector",function(){}); 举例:如果 ...
- Codeforces.1082E.Increasing Frequency(思路)
题目链接 \(Description\) 给定\(n\)个数.你可以选择一段区间将它们都加上或减去任意一个数.求最终序列中最多能有多少个数等于给定的\(C\). \(n\leq5\times10^5\ ...
- IDEA安装使用Lombok插件
项目中经常使用bean,entity等类,绝大部分数据类类中都需要get.set.toString.equals和hashCode方法,虽然IDEA开发环境下都有自动生成的快捷方式,但自动生成这些代码 ...
- Mac如何彻底卸载Mysql
因为工作变动,到新公司需要安装开发环境,因为电脑是我的“前任”在使用,一般的开发环境都有,就直接上手代码,连接公司数据库.直到某天打算自己写点东西,连接本地的mysql,发现navicat怎么都连接不 ...
- 潭州课堂25班:Ph201805201 爬虫高级 第九课 scrapyd 部署 (课堂笔记)
c rapyd是 scrapy 的部署, 是官方提供的一个爬虫管理工具, 通过他可以非常方便的上传控制爬虫的运行, 安装 : pip install scapyd 他提供了一个json ,web, s ...
- MPU和CPU有什么区别?
MPU(或称MP,微处理器)和CPU(中央处理器)同为处理器,但范畴不同. 计算机(即电脑)分为巨型机,大型机,中型机,小型机和微型计算机5类.这5类计算机的运算核心统称为CPU,而MPU只是微型计算 ...
- 高速公路 [HAOI2012] [线段树]
Description Y901高速公路是一条重要的交通纽带,政府部门建设初期的投入以及使用期间的养护费用都不低,因此政府在这条高速公路上设立了许多收费站. Y901高速公路是一条由N-1段路以及N个 ...