Maison > Article > interface Web > Partagez l'exemple de code de la barre de progression du cercle de toile h5
Partagez l'exemple de code de la barre de progression du cercle de toile h5
- 零下一度original
- 2017-05-27 15:10:042467parcourir
J'ai de nombreuses idées pour implémenter l'exemple de code de la barre de progression du cercle de canevas h5, mais l'utilisation de canevas est sans aucun doute la solution la plus pratique. Ici, je prends l'exemple de l'implémentation de canevas. Les étapes d'implémentation spécifiques sont les suivantes :
<!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>[Recommandations associées]1 Exemple d'implémentation de canevas H5 de dynamique circulaire. progression du chargement
2.Canvas implémente une barre de progression circulaire et affiche un pourcentage numérique
3 4.Un exemple de tutoriel sur le développement de mini-programmes utilisant co pour gérer des processus asynchrones
5Méthode simple JS+canvas pour dessiner des cercles_javascript.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!