<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><canvas id="canvas" width="500" height="500"> 您的浏览器不支持canvas</canvas><script>window.onload = function () { var canvas = document.getElementById(‘canvas‘), context = canvas.getContext(‘2d‘), cirX = canvas.width/ 2, cirY = canvas.height/ 2, rad = Math.PI * 2 /100, n = 1, speed = 150, r = 100; //绘制最外层细圈 function writeCircle(){ context.save(); context.beginPath(); context.strokeStyle = ‘skyblue‘; context.arc(cirX,cirY,r,0,Math.PI * 2,false); context.stroke(); context.restore(); } //绘制文本 function writeText(n){ context.save(); context.strokeStyle = ‘skyblue‘; context.font = ‘40px Arial‘; context.strokeText(n.toFixed(0)+‘%‘,cirX-30,cirY+10); context.stroke(); context.restore(); } //绘制蓝色外圈 function writeBlue(n){ context.save(); context.strokeStyle = ‘skyblue‘; context.lineWidth = 4; context.beginPath(); context.arc(cirX,cirY,r,-Math.PI/2,-Math.PI/2+rad*n,false); context.stroke(); context.restore(); }
function DreamLoading(){ //清除所有，重新绘制 context.clearRect(0,0,canvas.width,canvas.height); writeCircle(); writeText(n); writeBlue(n); if(n < 100){ n = n + 0.1; }else{ n = 0; } requestAnimationFrame(DreamLoading); } DreamLoading();}
</script></body></html>
时间： 2024-10-17 23:22:12