效果图
功能点
1.百分比字幕在屏幕中间
2.百分比和圆环动态展示，互相关联
3.鼠标移入圆环时，图标变成手;移出恢复
4.鼠标移入圆环是点击，百分比暂停&开始动态切换<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwPjUuyvOx6tTa1LK7t83izt6147v30Ke5+zwvcD4NCjxwPjYuyvOx6tTaY2FudmFzxNrKsbavzKzP1Mq+zrvWwzwvcD4NCjxwPrK71+Ojusrzseq147v3v9jWxtSyu7eypbfFyrGjrLXa0rvWodfcyse00823v6rKvLvm1sajrNPQycHLuLXE0Ke5+6GjPC9wPg0KPHA+tPrC68jnz8KjujwvcD4NCjxwcmUgY2xhc3M9"brush:java;"> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body { text-align: center; } #canvas { margin: 100px auto; background: #aaa; } .pointer { cursor: pointer; } </style> </head> <body> <p id="message">x=0 ,y=0</p> <canvas id="canvas" width="600" height="600"></canvas> <script> (function () { let startDeg = -90; let endDeg = -90; let canvas = document.getElementById('canvas'); let ctx = canvas.getContext('2d'); let isRotate = true; let t = null; let RotateStep = 5; initCircle(RotateStep); //初始化页面 function initCircle(step) { drawCircle(0,360,'#fff'); drawPercent('0%','#f00'); t = setInterval(function () { if(endDeg > 270){ endDeg = -90; ctx.clearRect(0,0,600,600); drawCircle(0,360,'#fff'); } drawCircle(startDeg,endDeg,'#3BB5FF'); let percent = Math.round((endDeg+90)/360*1000)/10+'%'; drawPercent(percent); endDeg+=step; },50); } //画圆函数 function drawCircle(startDeg,endDeg,color) { ctx.beginPath(); ctx.arc(300,300,200,startDeg*Math.PI/180,endDeg*Math.PI/180); ctx.lineWidth = 30; ctx.strokeStyle = color; ctx.stroke(); } //画百分比 function drawPercent(txt,color) { let width = ctx.measureText(txt).width; //扩大清除范围,彻底清除字符 ctx.clearRect((300-width/2-50),(300-25),width+100,50); ctx.textBaseline = 'top'; ctx.font = '50px SimHei'; ctx.fillStyle = color; ctx.fillText(txt,(300-width/2),(300-25)); } //得到鼠标位置 function getLocation(x,y) { let box = canvas.getBoundingClientRect(); return { x:(x-box.left) * (canvas.width/box.width), y: (y - box.top) * (canvas.height / box.height) /* * 此处不用下面两行是为了防止使用CSS和JS改变了canvas的高宽之后是表面积拉大而实际 * 显示像素不变而造成的坐标获取不准的情况 x: (x - box.left), y: (y - box.top) */ } } //判断鼠标是否在园内 function judgeArea(a,b,r,location) { let distance =(location.x-a)*(location.x-a) + (location.y-b)*(location.y-b); return (distance <= r*r) ? 1 : 0; /* *圆的数学公式(x-a)²+(y-b)²=r² */ } //添加监听事件,addEventListener可以对同一个元素添加多个监听事件 canvas.addEventListener('mousemove',function (e) { let location = getLocation(e.clientX,e.clientY); document.getElementById('message').innerHTML = `x=${location.x} ,y=${location.y}`; judgeArea(300,300,200,location) ? (canvas.className = 'pointer') : (canvas.className = ''); },false); canvas.addEventListener('click',function (e) { let location = getLocation(e.clientX,e.clientY); if( judgeArea(300,300,200,location) ){ if(isRotate){ clearInterval(t); t=null; }else { initCircle(RotateStep); } isRotate = !isRotate; } },false) })() </script> </body> </html>
