Canvas制作动态进度加载水球

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Canvas制作动态进度加载水球</title>
  6     <style type="text/css">
  7         #c{
  8             margin: 0 auto;
  9             display: block;
 10         }
 11         #r{
 12             display: block;
 13             margin: 0 auto;
 14         }
 15         #r::before{
 16             color: black;
 17             content: attr(min);
 18             padding-right: 10px;
 19         }
 20         #r::after{
 21             color: black;
 22             content: attr(max);
 23             padding-left: 10px;
 24         }
 25     </style>
 26     <script type="text/javascript">
 27     window.onload=function() {
 28 
 29         var canvas = document.getElementById('c');
 30         var ctx = canvas.getContext('2d');
 31         var range = document.getElementById('r');
 32 
 33         //range控件信息
 34         var rangeValue = range.value;// 默认5 
 35         var nowRange = 0;    //用于做一个临时的range
 36 
 37         //画布属性
 38         var mW = canvas.width = 250;
 39         var mH = canvas.height = 250;
 40         var lineWidth = 2;
 41 
 42         //圆属性
 43         var r = mH / 2; //圆心
 44         var cR = r - 16 * lineWidth; //圆半径
 45 
 46         //Sin 曲线属性
 47         var sX = 0;
 48         var sY = mH / 2;
 49         var axisLength = mW; //轴长
 50         var waveWidth = 0.03 ;   // 绝对值 波浪宽度,数越小越宽    
 51         var waveHeight = 6; //波浪高度,数越大越高
 52         var speed = 0.10; //波浪速度，数越大速度越快 改变sin 的值
 53         var xOffset = 0; //波浪x偏移量
 54 
 55         ctx.lineWidth = lineWidth;
 56 
 57         //画圈函数
 58         var IsdrawCircled = false;
 59         var drawCircle = function(){
 60             
 61             ctx.beginPath();
 62             ctx.strokeStyle = '#1080d0';
 63             ctx.arc(r, r, cR+5, 0, 2 * Math.PI);
 64             ctx.stroke();
 65             ctx.beginPath();
 66             ctx.arc(r, r, cR, 0, 2 * Math.PI);
 67             ctx.clip();
 68             
 69         }
 70 
 71     //画sin 曲线函数
 72     var drawSin = function(xOffset){
 73         
 74         ctx.save();
 75         
 76         var points=[];    //用于存放绘制Sin曲线的点
 77         
 78         ctx.beginPath();
 79         //在整个轴长上取点
 80         // 250     20/250  ==3125 个点  绘制多个 x.y 点
 81         for(var x = sX; x < axisLength; x += 20 / axisLength){
 82             //此处坐标(x,y)的取点，依靠公式 “振幅高*sin(x*振幅宽 + 振幅偏移量)”
 83             var y = -Math.sin(x * waveWidth + xOffset);  // 返回-1 到 1 的值
 84             var dY = mH * (1 - nowRange / 100 );
 85             
 86             points.push([x, dY + y * waveHeight]);
 87             ctx.lineTo(x, dY + y * waveHeight);
 88 
 89         }//--------------绘制波浪
 90 
 91     
 92         //封闭路径
 93         
 94         ctx.lineTo(axisLength, mH); //250 250  ---最右边
 95         ctx.lineTo(sX, mH); //0 250  ----最左边
 96 
 97         ctx.fillStyle = '#1c86d1';
 98         ctx.fill();
 99         
100         ctx.restore();
101     };
102 
103     //写百分比文本函数
104     var drawText = function(){
105         ctx.save();
106         
107         var size = 0.4*cR;
108         ctx.font = size + 'px Microsoft Yahei';
109         ctx.textAlign = 'center';
110         ctx.fillStyle = "rgba(06, 85, 128, 0.8)";
111           ctx.fillText(nowRange + '%', r, r + size / 2);
112         
113         ctx.restore();
114     };
115 
116     var render = function(){
117         ctx.clearRect(0, 0, mW, mH);
118         
119         rangeValue = range.value;
120         
121         if(IsdrawCircled == false){
122             drawCircle();    
123         }
124         
125         if(nowRange <= rangeValue){
126             var tmp = 1;
127             nowRange += tmp;
128         }
129         
130         if(nowRange > rangeValue){
131             var tmp = 1;
132             nowRange -= tmp;
133         }
134         
135         if(rangeValue>0)
136         {
137             drawSin(xOffset);        
138         }
139         drawText();
140         
141         xOffset += speed;
142 
143         requestAnimationFrame(render);
144     } 
145        render();
146     }
147     </script>
148 </head>
149 <body>
150     
151 </body>
152     <canvas id="c"></canvas>
153     <input type="range" id="r" min="0" max="100" step="1" value="0">
154 </html>
文章引用： Canvas制作动态进度加载水球
相关动画：基于canvas实现物理运动效果与动画效果(一)
Canvas实现直线与圆形的物理运动效果　　　　
[js高手之路]html5 canvas动画教程 - 重力、摩擦力、加速、抛物线运动