使用canvas实现360水球波动
代码如下：
<!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; } #circular { position: absolute; left: 500px; top: 400px; } #canvas_dom { position: absolute; left: 500px; top: 100px; } </style> </head> <body style="background-color: #0020cad6;"> <canvas id="circular" width="1000" height="1000">当前浏览器不支持canvas请升级！</canvas> <canvas id="canvas_dom" width="1000" height="1000"></canvas> </body> <script> canvas = document.getElementById("circular"); ctx = canvas.getContext("2d"); canvas.width = 800; oH = canvas.height = 800; // 线宽 lineWidth = 2; // 大半径 r = (canvas.width / 2); cR = r - 10 * lineWidth; ctx.beginPath(); ctx.lineWidth = lineWidth; // 水波动画初始参数 axisLength = 2 * r - 16 * lineWidth; // Sin 图形长度 unit = axisLength / 9; // 波浪宽 range = .3 // 浪幅 nowrange = range; xoffset = 8 * lineWidth; // 数据量 sp = 0; // 周期偏移量 nowdata = 0; waveupsp = 0.006; // 水波上涨速度 // 圆动画初始参数 arcStack = []; // 圆栈 bR = r - 8 * lineWidth; soffset = -(Math.PI / 2); // 圆动画起始位置 circleLock = true; // 起始动画锁 // 获取圆动画轨迹点集 for (var i = soffset; i < soffset + 2 * Math.PI; i += 1 / (8 * Math.PI)) { arcStack.push([r + bR * Math.cos(i), r + bR * Math.sin(i)]) } // 圆起始点 cStartPoint = arcStack.shift(); ctx.strokeStyle = "#1c86d1"; ctx.moveTo(cStartPoint[0], cStartPoint[1]); // 开始渲染 render(); var data = 0.5; setInterval(function(){ data = Math.round(Math.random()*10) /10; }, 2000); 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 = Math.sin(x) * .2; 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, canvas.width); ctx.lineTo(xoffset, canvas.width); ctx.lineTo(startP[0], startP[1]); //水波的颜色 // 创建渐变 var grd=ctx.createLinearGradient(0,0,0,canvas.width); grd.addColorStop(0.3,"red"); grd.addColorStop(0.3,"#EEA2AD"); grd.addColorStop(0.5,"blue"); grd.addColorStop(0.7,"#D8BFD8"); grd.addColorStop(1,"white"); // 填充渐变 ctx.fillStyle=grd; ctx.fill(); ctx.restore(); } function drawText() { ctx.globalCompositeOperation = 'source-over'; var size = 0.2 * cR; ctx.font = 'bold ' + size + 'px Microsoft Yahei'; txt = (nowdata.toFixed(2) * 100).toFixed(0) + '%'; var fonty = r + size / 2; var fontx = r - size * 0.8; //字体颜色 ctx.fillStyle = "#00FA9A"; ctx.textAlign = 'center'; ctx.fillText(txt, r + 5, r + 5) } //最一层 function drawCircle() { ctx.beginPath(); ctx.lineWidth = 0; ctx.strokeStyle = '#00FFFF'; //不要直接 ctx.arc(r, r, cR + 7, 0, 2 * Math.PI); ctx.stroke(); ctx.restore(); } //第二层 function grayCircle() { ctx.beginPath(); //宽度 ctx.lineWidth = 12; //颜色 ctx.strokeStyle = '#7FFFAA'; ctx.arc(r, r, cR - 5, 0, 2 * Math.PI); ctx.stroke(); ctx.restore(); ctx.beginPath(); } //第二层进度圈 function orangeCircle() { ctx.beginPath(); //宽度 ctx.lineWidth = 2; ctx.strokeStyle = '#af1cd1'; //使用这个使圆环两端是圆弧形状 ctx.lineCap = 'round'; ctx.arc(r, r, cR - 5, - (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 - 15, 0, 2 * Math.PI, false); ctx.clip(); } //外员动态 function wytd(){ init_angle = 0; var small_x = Math.cos(init_angle)*80; var small_y = Math.sin(init_angle)*80; ctx.beginPath(); ctx.translate(small_x,0); ctx.arc(0,0,10,0,Math.PI*2); ctx.closePath(); ctx.fill(); ctx.restore(); init_angle = init_angle + Math.PI*2/360; if(init_angle >2 ){ init_angle = 0; } } //渲染canvas function render() { ctx.clearRect(0, 0, canvas.width, canvas.height); drawCircle(); grayCircle(); //橘黄色进度圈// orangeCircle(); //裁剪中间水圈 clipCircle(); let aa = 10; 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> <script type="text/javascript"> var canvas_dom = document.getElementById("canvas_dom"); var ctxfs = canvas_dom.getContext('2d'); var unit_angle = Math.PI*2/360; var init_angle = 0; function draw(){ //清除位置 ctxfs.clearRect(0,0,canvas_dom.width,canvas_dom.height); //第一个 ctxfs.save(); ctxfs.translate(500,300); ctxfs.fillStyle = "red"; ctxfs.beginPath(); ctxfs.arc(300,0,70,0,Math.PI*2,false); ctxfs.closePath(); ctxfs.fill(); var small_x = Math.cos(init_angle)*80; var small_y = Math.sin(init_angle)*80; ctxfs.beginPath(); //只需要修改后面参数 ctxfs.translate(small_x,20); //arc(移动左右位置,移动上下位置,大小,不需要修改,不需要修改) a ctxfs.arc(200,10,15,0,Math.PI*2); ctxfs.closePath(); ctxfs.fill(); ctxfs.restore(); init_angle = init_angle + unit_angle; //第二个 ctxfs.save(); ctxfs.translate(650,600); ctxfs.fillStyle = "red"; ctxfs.beginPath(); ctxfs.arc(300,0,70,0,Math.PI*2,false); ctxfs.closePath(); ctxfs.fill(); var small_x = Math.cos(init_angle)*80; var small_y = Math.sin(init_angle)*80; ctxfs.beginPath(); ctxfs.translate(small_x,0); ctxfs.arc(170,20,10,0,Math.PI*2); ctxfs.closePath(); ctxfs.fill(); ctxfs.restore(); //第三个 ctxfs.save(); ctxfs.translate(650,900); ctxfs.fillStyle = "red"; ctxfs.beginPath(); ctxfs.arc(300,0,50,0,Math.PI*2,false); ctxfs.closePath(); ctxfs.fill(); var small_x = Math.cos(init_angle)*80; var small_y = Math.sin(init_angle)*80; ctxfs.beginPath(); ctxfs.translate(small_x,0); ctxfs.arc(170,20,10,0,Math.PI*2); ctxfs.closePath(); ctxfs.fill(); ctxfs.restore(); //第四个 ctxfs.save(); ctxfs.translate(500,1100); ctxfs.fillStyle = "red"; ctxfs.beginPath(); ctxfs.arc(300,0,70,0,Math.PI*2,false); ctxfs.closePath(); ctxfs.fill(); var small_x = Math.cos(init_angle)*80; var small_y = Math.sin(init_angle)*80; ctxfs.beginPath(); ctxfs.translate(small_x,0); ctxfs.arc(170,20,10,0,Math.PI*2); ctxfs.closePath(); ctxfs.fill(); ctxfs.restore(); init_angle = init_angle + unit_angle; window.requestAnimationFrame(draw); } //自执行函数 (function(){ draw(); })(); </script> </html>
