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:042528parcourir

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 :

Paste_Image.png

<!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(&#39;canvas1&#39;,100,6,10);//id，画布宽和高，圆的半径 百分百。
        new Progress().renderOne(&#39;canvas2&#39;,100,5,20);
        new Progress().renderOne(&#39;canvas3&#39;,100,5,30);

        new Progress().renderOne(&#39;canvas8&#39;,100,5,80);
        new Progress().renderOne(&#39;canvas9&#39;,100,5,90);
        new Progress().renderOne(&#39;canvas10&#39;,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 =&#39;red&#39;;/////////////////////////////////////////////////
            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]

Exemple d'implémentation de canevas H5 de dynamique circulaire. progression du chargement

Canvas implémente une barre de progression circulaire et affiche un pourcentage numérique

Programmation HTML5

Un exemple de tutoriel sur le développement de mini-programmes utilisant co pour gérer des processus asynchrones

Mé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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Le canevas H5 implémente un exemple de progression de chargement dynamique circulaireArticle suivant：Le canevas H5 implémente un exemple de progression de chargement dynamique circulaire

Articles Liés

Voir plus