<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas制作动态进度加载水球</title>
<style type="text/css">
#c{
margin: 0 auto;
display: block;
}
#r{
display: block;
margin: 0 auto;
}
#r::before{
color: black;
content: attr(min);
padding-right: 10px;
}
#r::after{
color: black;
content: attr(max);
padding-left: 10px;
}
</style>
<script type="text/javascript">
window.onload=function() { var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var range = document.getElementById('r'); //range控件信息
var rangeValue = range.value;// 默认5
var nowRange = 0; //用于做一个临时的range //画布属性
var mW = canvas.width = 250;
var mH = canvas.height = 250;
var lineWidth = 2; //圆属性
var r = mH / 2; //圆心
var cR = r - 16 * lineWidth; //圆半径 //Sin 曲线属性
var sX = 0;
var sY = mH / 2;
var axisLength = mW; //轴长
var waveWidth = 0.03 ; // 绝对值 波浪宽度,数越小越宽
var waveHeight = 6; //波浪高度,数越大越高
var speed = 0.10; //波浪速度,数越大速度越快 改变sin 的值
var xOffset = 0; //波浪x偏移量 ctx.lineWidth = lineWidth; //画圈函数
var IsdrawCircled = false;
var drawCircle = function(){ ctx.beginPath();
ctx.strokeStyle = '#1080d0';
ctx.arc(r, r, cR+5, 0, 2 * Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.arc(r, r, cR, 0, 2 * Math.PI);
ctx.clip(); } //画sin 曲线函数
var drawSin = function(xOffset){ ctx.save(); var points=[]; //用于存放绘制Sin曲线的点 ctx.beginPath();
//在整个轴长上取点
// 250 20/250 ==3125 个点 绘制多个 x.y 点
for(var x = sX; x < axisLength; x += 20 / axisLength){
//此处坐标(x,y)的取点,依靠公式 “振幅高*sin(x*振幅宽 + 振幅偏移量)”
var y = -Math.sin(x * waveWidth + xOffset); // 返回-1 到 1 的值
var dY = mH * (1 - nowRange / 100 ); points.push([x, dY + y * waveHeight]);
ctx.lineTo(x, dY + y * waveHeight); }//--------------绘制波浪 //封闭路径 ctx.lineTo(axisLength, mH); //250 250 ---最右边
ctx.lineTo(sX, mH); //0 250 ----最左边 ctx.fillStyle = '#1c86d1';
ctx.fill(); ctx.restore();
}; //写百分比文本函数
var drawText = function(){
ctx.save(); var size = 0.4*cR;
ctx.font = size + 'px Microsoft Yahei';
ctx.textAlign = 'center';
ctx.fillStyle = "rgba(06, 85, 128, 0.8)";
ctx.fillText(nowRange + '%', r, r + size / 2); ctx.restore();
}; var render = function(){
ctx.clearRect(0, 0, mW, mH); rangeValue = range.value; if(IsdrawCircled == false){
drawCircle();
} if(nowRange <= rangeValue){
var tmp = 1;
nowRange += tmp;
} if(nowRange > rangeValue){
var tmp = 1;
nowRange -= tmp;
} if(rangeValue>0)
{
drawSin(xOffset);
}
drawText(); xOffset += speed; requestAnimationFrame(render);
}
render();
}
</script>
</head>
<body> </body>
<canvas id="c"></canvas>
<input type="range" id="r" min="0" max="100" step="1" value="0">
</html>

文章引用:    Canvas制作动态进度加载水球

相关动画 :    基于canvas实现物理运动效果与动画效果(一)

Canvas实现直线与圆形的物理运动效果    

[js高手之路]html5 canvas动画教程 - 重力、摩擦力、加速、抛物线运动

Canvas制作动态进度加载水球的更多相关文章

  1. Canvas绘制水波进度加载

    效果: 用到图片下载: 自定义View: package com.czm.mysinkingview; import android.content.Context; import android.g ...

  2. 【微信小程序】模仿58同城页面制作以及动态数据加载

    完成动态数据的加载,如下 使用上班的空余时间慢慢的学习,相信总有一天我会很熟悉的掌握这门技术. 本次学习小总结: 微信小程序使用的代码基本与HTML.CSS.JS等前段有关知识一样. 微信小程序js使 ...

  3. esri-leaflet入门教程(5)- 动态要素加载

    esri-leaflet入门教程(5)- 动态要素加载 by 李远祥 在上一章节中已经说明了esr-leaflet是如何加载ArcGIS Server提供的各种服务,这些都是服务本身来决定的,API脚 ...

  4. 原生JS实战:分享一个首页进度加载动画!

    本文是苏福的原创文章,转载请注明出处:苏福CNblog:http://www.cnblogs.com/susufufu/p/5871134.html 该程序是本人的个人作品,写的不好,可以参考,但未经 ...

  5. Java_动态重新加载Class总结

    在此记载Java动态重新加载Class的点点滴滴,实现之前也在网上看了很多文章,但发现不是很清晰,后来发现总结,看源码实现还是最靠谱. 直接上代码: package com.lkb.autoCode. ...

  6. Java_动态重新加载Class机制

    Java动态重新加载Class 项目中使用到了动态重新加载Class的机制,作用是让一些代码上线之前可以在线上环境测试一下,当然,这是非常不好的测试机制,我刚来的时候也为这种机制感到惊讶—怎么可以在线 ...

  7. Android系统下的动态Dex加载

    1 问题在Android系统中,一个App的所有代码都在一个Dex文件里面.Dex是一个类似Jar的存储了多有Java编译字节码的归档文件.因为Android系统使用Dalvik虚拟机,所以需要把使用 ...

  8. Android系统下的动态Dex加载与app速度优化

    1 问题 在Android系统中,一个App的所有代码都在一个Dex文件里面.Dex是一个类似Jar的存储了多有Java编译字节码的归档文件.因为Android系统使用Dalvik虚拟机,所以需要把 ...

  9. linux动态库加载RPATH, RUNPATH

    摘自http://gotowqj.iteye.com/blog/1926771 linux动态库加载RPATH, RUNPATH 链接动态库 如何程序在连接时使用了共享库,就必须在运行的时候能够找到共 ...

随机推荐

  1. C语言学习笔记--函数与指针

    1. 函数类型 (1)C 语言中的函数有自己特定的类型,这个类型由返回值.参数类型和参数个数共同决定.如 int add(int i,int j)的类型为 int(int,int). (2)C 语言中 ...

  2. 浅谈时钟的生成(js手写代码)(非原创)

    在生成时钟的过程中自己想到布置表盘的写法由这么几种: 当然利用那种模式都可以实现,所以我们要用一个最好理解,代码有相对简便的方法实现 1.利用三角函数 用js在三角函数布置表盘的过程中有遇见到这种情况 ...

  3. python爬虫(7)--Beautiful Soup的用法

    1.Beautiful Soup简介 简单来说,Beautiful Soup是python的一个库,最主要的功能是从网页抓取数据. Beautiful Soup提供一些简单的.python式的函数用来 ...

  4. hibernate学习笔记(6)组件属性以及单表操作

    组件属性:实体类中的某个属性属于用户自定义类的对象: 作用:将两个实体类合并在一起组建成一个表 在hbm.xml文件中配置: 格式: <component name="取的名字&quo ...

  5. linux系统 使用git图形化管理工具———gitk

    运行安装命令: sudo apt-get install gitk 运行命令打开gitk : gitk

  6. 玩转Jquery

    一 jquery简介 1 jquery是什么 jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. jQuery是继prototype ...

  7. day35 02-Hibernate持久化对象状态及状态转换

    hibernate内置有一个c3p0,不用引入c3p0的jar包也行. 现在其实可以不用去创建表和实体类.因为hibernate可以自动帮我们生成.只要把映射建好了它就可以自动帮我们生成. 创建实体类 ...

  8. 【总结整理】arcgis js api的Map类

    关于ArcGis for javascrept之Map类   ArcGis for javascrept_ESRI_Map类:  1. 构造方法:esri.Map(); 参数: extent 如果设置 ...

  9. python struct.pack中的对齐字节问题

    最近测试涉及到了序列字节化相关问题,碰到一个头疼的问题 buff = struct.pack("3s","B00")    print repr(buff) 输 ...

  10. Luogu 2921 [USACO08DEC]在农场万圣节Trick or Treat on the Farm

    基环树森林,然而我比较菜,直接tarjan找环. 发现缩点之后变成了DAG,每一个点往下走一定会走到一个环,缩点之后搜一遍看看会走到哪个环以及那个环的编号是多少,答案就是环的$siz$$ + $要走的 ...