h5 캔버스 원 진행률 표시줄의 예제 코드를 구현하기 위한 많은 아이디어가 있지만 의심할 여지 없이 캔버스를 사용하는 것이 가장 편리한 솔루션입니다. 여기서는 캔버스 구현을 예로 들어 보겠습니다.
<!DOCTYPE html> <html> <meta charset="utf-8"> <head> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } </style> <!-- <script type="text/javascript" src="js/Progress.js"></script> --> </head> <body> <canvas id="canvas1"></canvas> <canvas id="canvas2"></canvas> <canvas id="canvas3"></canvas> <canvas id="canvas8"></canvas> <canvas id="canvas9"></canvas> <canvas id="canvas10"></canvas> <script type="text/javascript"> window.onload = function(){ new Progress().renderOne('canvas1',100,6,10);//id,画布宽和高,圆的半径 百分百。 new Progress().renderOne('canvas2',100,5,20); new Progress().renderOne('canvas3',100,5,30); new Progress().renderOne('canvas8',100,5,80); new Progress().renderOne('canvas9',100,5,90); new Progress().renderOne('canvas10',100,5,100); } function Progress() { var progress = { textheight: null, renderOne: function(id, length, r, percent) { var canvas = document.getElementById(id); var context = canvas.getContext("2d"); canvas.width = length; canvas.height = length; var i = 0; var interval = setInterval(function() { i++; progress.render(context, length, r, i, percent); if (i >= percent) { clearInterval(interval) } }, 10) }, render: function(context, length, r, i, percent) { context.clearRect(0, 0, length, length); context.beginPath(); var gradient = context.createLinearGradient(length, 0, 0, 0); gradient.addColorStop("0", "#76EEC6"); gradient.addColorStop("1.0", "#63B8FF"); context.strokeStyle = gradient; context.lineWidth = r; context.arc(length / 2, length / 2, length / 2 - r, -0.5 * Math.PI, -0.5 * Math.PI + i * 0.02 * Math.PI, false); context.stroke(); context.closePath(); context.beginPath(); context.strokeStyle = "#8d8d8d"; context.strokeStyle ='red';///////////////////////////////////////////////// context.lineWidth = 2; context.fillStyle = "#ffffff"; context.arc(length / 2, r, 0.6 * r, 0, 2 * Math.PI, false); context.stroke(); context.fill(); context.closePath(); context.beginPath(); var radian = percent / 100 * 2 * Math.PI - 0.5 * Math.PI; var x = Math.cos(radian) * (length / 2 - r) + length / 2; var y = Math.sin(radian) * (length / 2 - r) + length / 2; context.arc(x, y, 0.6 * r, 0, 2 * Math.PI, false); context.stroke(); context.fill(); context.closePath(); context.beginPath(); context.lineWidth = 1; context.strokeStyle = "#54DDAF"; context.fillStyle = "#54DDAF"; context.fillStyle = "blue";/////////////////////////////////////// context.arc(length / 2, length / 2, length / 2 - 2 * r, 0, 2 * Math.PI); context.fill(); context.closePath(); context.beginPath(); context.font = "bold " + (length / 2 - 2.5 * r) / 2 + "px 微软雅黑"; context.fillStyle = "#ffffff"; var text = percent + "%"; textwidth = context.measureText(text).width; if (this.textheight == null) { var p = document.createElement("p"); document.body.appendChild(p); p.innerHTML = text; p.style.fontSize = ((length / 2 - 2.5 * r) / 2) + "px"; this.textheight = p.offsetHeight; p.parentNode.removeChild(p) } textheight = this.textheight; context.fillText(text, (length - textwidth) / 2, length / 2 + textheight / 4); context.fill(); context.closePath() } }; return progress }; </script> </body> </html>
【관련 권장사항】
1. H5 캔버스는 원형 동적 로딩 진행 예시를 구현합니다
2 캔버스는 원형 진행률 표시줄을 구현하고 디지털 백분율을 표시합니다
3. co를 사용하여 비동기 프로세스를 처리하는 미니 프로그램 개발 예제 튜토리얼
위 내용은 h5 캔버스 원 진행률 표시줄의 예시 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!