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实现物理运动效果与动画效果(一)