半圆环进度条"/>
用canvan实现绘制半圆环进度条
效果图
实现原理：
1.使用canvas绘制半圆弧，底图灰色半圆弧和颜色进度圆弧。
2.利用setInterval计时器，逐步改变颜色进度条，达到进度条的效果。
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /><title>半圆进度条</title><script type="text/javascript" src=".2.3/jquery.min.js"></script>
</head><body><canvas id="canvas" width="300" height="300"></canvas><script type="text/javascript">function toCanvas(id, progress, progress2) {//canvas进度条var canvas = document.getElementById(id),ctx = canvas.getContext("2d"),percent = progress,percent2 = progress2,//最终百分比circleX = canvas.width / 2, // 中心x坐标circleY = canvas.height / 2, //中心y坐标radius = 100, //圆环半径lineWidth = 15, // 圆形线条的宽度fontSize = 15; //字体大小//画圆function circle(cx, cy, r) {ctx.beginPath();ctx.lineWidth = lineWidth;ctx.strokeStyle = '#eee';ctx.arc(cx, cy, r, Math.PI, Math.PI * 2);//ctx.arc(cx, cy, r, Math.PI * 2 / 3, Math.PI * 1 / 3);ctx.stroke();}//画弧线function sector(cx, cy, r, startAngle, endAngle, anti) {ctx.beginPath();ctx.lineWidth = lineWidth;// 渐变色 - 可自定义var linGrad = ctx.createLinearGradient(circleX - radius - lineWidth, circleY, circleX + radius + lineWidth, circleY);linGrad.addColorStop(0.0, '#06a8f3');linGrad.addColorStop(1.0, '#00f8bb');ctx.strokeStyle = linGrad;//圆弧两端的样式ctx.lineCap = 'round';ctx.arc(cx, cy, r, Math.PI, Math.PI * (1 + endAngle / 100));ctx.stroke();}//刷新function loading() {var percent3 = progress;if (percent < percent2) percent = percent2;if (process >= percent) clearInterval(circleLoading);// if (process2 >= percent) clearInterval(circleLoading);//清除canvas内容ctx.clearRect(0, 0, circleX * 2, circleY * 2);//中间的字ctx.font = fontSize + 'px April';ctx.textAlign = 'center';ctx.textBaseline = 'middle';ctx.fillStyle = '#999';ctx.fillText(parseFloat(process).toFixed(0) + '%', circleX, circleY * 4 / 5);ctx.fillText("百分比", circleX, circleY); //圆形circle(circleX, circleY, radius);//圆弧sector(circleX, circleY, radius, Math.PI * 2 / 3, process);//控制结束时动画的速度if (process < percent3) {if (process / percent > 0.90) {process += 0.30;} else if (process / percent > 0.80) {process += 0.55;} else if (process / percent > 0.70) {process += 0.75;} else {process += 1.0;}}}var process = 0.0;var circleLoading = window.setInterval(function () {loading();}, 20);}toCanvas('canvas', 50, 80);</script>
</body></html>更多推荐
用canvan实现绘制半圆环进度条
发布评论