介绍 & lt; canvas id=癱anvas",宽度=?00“,身高=?00“,风格=氨尘?# F7F7F7;“比;
,,,& lt; p>你browser not support 画布! & lt;/p>
& lt;才能/canvas> var canvas =, . getelementbyid(& # 39;帆布# 39;),,//获取帆布元素
时间=context 才能;canvas.getContext (& # 39; 2 d # 39;),,//获取画图环境,指明为2 d
centerX 才能=,canvas.width /,,,//画布中心点x轴坐标
centerY 才能=,canvas.height /,,,//画布中心点y轴坐标
rad 才能=,Math.PI *, 2,/, 100,,//将360度分成100份,那么每一份就是rad度
speed 才能;0.1=,,,//加载的快慢就靠它了//绘制蓝色外圈
function blueCircle (n), {
context.save才能();
context.beginPath才能();
context.strokeStyle =,才能“# 49 f";
context.lineWidth 才能=,12;
context.arc才能(centerX, centerY,, 100,, -Math.PI /, 2, -Math.PI /, 2, +, n *, rad,,假);
context.stroke才能();
context.restore才能();
}//绘制白色外圈
function whiteCircle (), {
context.save才能();
context.beginPath才能();
context.strokeStyle =,才能“# A5DEF1";
context.lineWidth 才能=,12;
context.arc才能(centerX, centerY,, 100,, 0,, Math.PI *, 2,假);
context.stroke才能();
context.closePath才能();
context.restore才能();
}//百分比文字绘制
function 文本(n), {
context.save才能();
context.fillStyle =,才能“# F47C7C";
context.font =,才能“40 px Arial";
context.textAlign =,才能“center";
context.textBaseline =,才能“middle";
context.fillText才能(n.toFixed (0), +,“%”;,, centerX,, centerY);
context.restore才能();
}//动画循环
(function 拉伸机(),{
window.requestAnimationFrame才能(拉伸机,画布);
context.clearRect才能(0,0,canvas.width,, canvas.height);
whiteCircle才能();
文本才能(速度);
blueCircle才能(速度);
if 才能;(speed 祝辞,100),speed =, 0;
speed 才能+=,0.1;
}());
window.requestAnimationFrame(拉伸机,画布);
这篇文章给大家分享的是有关如何利用帆布实现环形进度条的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
前提:有时候在项目中会有用到进度条的情况,使用css3也可以实现,但是对于性能不好的设备,或者网络不好的情况下,卡顿现象非常明显,避免出现不流畅的尴尬情况,所以记录一下,使用帆布来实现的方法。
效果图
DOM中,首先定义帆布画板元素:
对于不支持画布的浏览器则会显示:你的浏览器不支持画布!
接下来是js编写:
定义画布。js并在页面引入
每行代码的注释标注非常清楚,如果还有不理解的可以去看帆布基础,应该就可以了。
感谢各位的阅读!关于“如何利用帆布实现环形进度条”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
