分享h5 canvas圆圈进度条的实例代码

百变鹏仔 2个月前 (10-18) #H5教程

文章标签圆圈

实现h5 canvas圆圈进度条的实例代码，本人的想法有很多，但是利用canvas无疑是最方便的解决办法，在此以canvas实现为例子，具体实现步骤如下：

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>

【

文章推荐

分享h5 canvas圆圈进度条的实例代码

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集