canvas实现环形进度条效果_canvas渐变进度图跑道形状资源-CSDN文库

105 浏览量 2020-12-10 21:33:13 上传评论收藏 80KB PDF 举报

资源推荐

资源详情

资源评论

canvas实现环形进度条效果实现环形进度条效果

昨下午睡着了，晚上打开手机才发现朋友给我发了一个QQ消息，问我这个怎么实现？

这里就选canvas来简单写一下先上代码，然后在说一说需要注意的点：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>canvas环形进度条</title>

<style>

body{

background-color:#000;

text-align: center;

}

.canvas1{

margin-top: 100px;

display: inline-block;

background-color: #FFF;

}

</style>

</head>

<body>

<canvas id="circle_process" class="canvas1"></canvas>

<script>

/*

需求：环形、一周分为10个片段，根据进度去走的一个状态

技术选型：canvas （挑战加熟悉）

思路：

01 首先中间的文字部分不用说，使用canvas的画文字。

02 圆形是个规则图形，那么为了避免画不规则图形，我们可以用圆和矩形来重叠出效果。

a. 大的灰色背景圆

b. 小一圈的白色背景圆

c. 以同心圆的圆心为圆心，小圆为半径为半径复制画10个小的矩形

*/

//初始化动画变量

var requestAnimationFrame = window.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame ||

window.webkitRequestAnimationFrame;

var cancelAnimationFrame = window.cancelAnimationFrame || window.msCancelAnimationFrame || window.mozCancelAnimationFrame ||

window.webkitCancelRequestAnimationFrame;

//初始化当前进度数

var curPercentCount = 0;

//获取canvas对象，设置画布大小

var oC = document.querySelector('#circle_process');

oC.width = 300;

oC.height = 300;

//获取canvas执行上下文

var ctx = oC.getContext('2d');

//定义小矩形的个数

var miniRectCount = 10;

//定义圆心位置

var cirCenter = {

x:oC.width/2,

y:oC.height/2

};

//定义小矩形的大小rectSize

var rectSize = {

width:0,

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

内容反馈

weixin_38711149

粉丝: 4
资源: 902

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip