<!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. jQuery的AJax异步加载

    主要用到load()方法以及getScript()方法,具体以一个例子说明: 在现有html文件中加载一个拟好的片段,以及在片段加载完成之前阻止用户进一步操作的弹出框. 首先是现有html代码,无任何 ...

  2. winform 对话框控件

    ColorDialog 可以调节颜色的控件,如果给一个按钮点击事件 ColorDialog.showdialog();就会弹出这个 返回值是个枚举类 然后定义一个这个类的变量 接收一下它的返回值 Di ...

  3. 【摘自张宴的"实战:Nginx"】使用nginx的proxy_cache模块替代squid,缓存静态文件

    #user nobody;worker_processes 1; error_log logs/static_source.error.log;#error_log logs/error.log no ...

  4. UTF8转unicode说明

    1.最新版iconv中的char *encTo = "UNICODE//IGNORE"; 是没有这个字符串的,它里面有UNICODELITTLE 和 UNICODEBIG 而且是没 ...

  5. RTX这种东西究竟有什么价值？

    我在第一家公司工作的时候,同事沟通用的就是RTX,第一感觉就是这么简单的软件也能卖钱? 这种东西有啥价值啊?不就是个没广告蓝色UI的qq吗? 还是那句话,当你已经习惯了一个东西之后,你不会感觉到他的价 ...

  6. Luogu 3530 [POI2012]FES-Festival

    我是真的不会写差分约束啊呜呜呜…… BZOJ 2788被权限了. 首先对于第一个限制$x + 1 = y$,可以转化成$x + 1 \leq y \leq x + 1$, 所以连一条$(y, x, - ...

  7. leetCode编程题

    已知链表1->2->3->4,先需要删除3这个节点,请完成函数.注意,这里只给定要删除的节点3,并不知道3之前的节点是哪个,以及整个链表是什么节点. void delete(List ...

  8. SDUT 3379 数据结构实验之查找七：线性之哈希表

    数据结构实验之查找七:线性之哈希表 Time Limit: 1000MS Memory Limit: 65536KB Submit Statistic Problem Description 根据给定 ...

  9. 修改tomcat默认的编码方式

    tomcat8以后默认编码格式是utf-8:7之前的都是iso8859-1 如果默认情况下,tomcat使用的的编码方式:iso8859-1 修改tomcat下的conf/server.xml文件 找 ...

  10. MySQL中的时间问题

    MySQL 获得当前日期时间 函数 获得当前日期+时间(date + time)函数:now() mysql> select now(); +---------------------+ | n ...