canvas环形数据效果

快乐打工仔 分类:实例代码

canvas环形数据效果属于前端实例代码,有关更多实例代码大家可以查看

分享一段代码实例,它利用canvas实现了环形数据效果。

代码实例如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>犀牛前端部落</title>
<script>
//适配
var html = document.getElementsByTagName("html")[0];
function getFontSize() {
var width = document.documentElement.clientWidth ||
document.body.clientWidth + "px";
var fontSize = (100 / 750) * width;
if (width >= 750) {
fontSize = "100";
}
return fontSize;
}
html.style.fontSize = getFontSize() + "px";
window.onresize = function () {
setTimeout(function () {
html.style.fontSize = getFontSize() + "px";
}, 100)
};
window.onload = function () {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//已还金额/总金额
var rand = 3000 / 5000 * 100;
var angle = 0;
var rot = 360 - rand;
function draw(angle) {
ctx.save();
ctx.translate(75, 75);
ctx.rotate(-Math.PI / 2)
ctx.fillStyle = "#fce5cc";
ctx.beginPath();
ctx.arc(0, 0, 100, Math.PI / 180 * angle, Math.PI * 2, false);
ctx.lineTo(0, 0);
ctx.closePath();
ctx.fill();
ctx.restore();
}
var timer = setInterval(function () {
angle += 1;
if (angle >= rot) {
clearInterval(timer);
}
ctx.clearRect(0, 0, 150, 150); //相当于初始化
draw(angle);
}, 5);
}
</script>
<style>
.Box {
width: 100%;
padding: .34rem 0;
border-bottom: 1px solid #d7d7d7;
background: #fff;
}
.Box .wradius {
width: 2.52rem;
height: 2.52rem;
border-radius: 50%;
background: #fce5cc;
margin: 0 auto;
position: relative;
}
.Box .nradius {
width: 1.78rem;
height: 1.78rem;
border-radius: 50%;
background: #3b3b3b;
left: 50%;
top: 50%;
margin-top: -0.89rem;
margin-left: -0.89rem;
border: 2px solid #f27d00;
position: absolute;
text-align: center;
}
.Box p {
font-size: .24rem;
color: #fff;
padding-top: .38rem;
padding-bottom: .1rem;
}
.Box h1 {
font-size: .48rem;
color: #f27d00;
}
.Box .jiekxq {
color: #f27d00;
font-size: .28rem;
position: relative;
text-align: right;
padding: 0 .3rem;
display: block;
}
.Box .jiekxq img {
position: absolute;
right: 1.9rem;
width: .3rem;
top: .08rem;
}
.moneypice {
padding: 0 .3rem;
margin: .33rem 0 .2rem;
border: 1px solid #d7d7d7;
border-right: none;
border-left: none;
background: #fff;
}
.moneypice p {
color: #161615;
font-size: .32rem;
border-bottom: 1px solid #d7d7d7;
line-height: 1.1rem;
overflow: hidden;
}
.moneypice p b {
float: left;
}
.moneypice p span {
color: #f27d00;
text-align: center;
float: left;
width: 5rem;
text-align: center;
}
.moneypice p img {
float: right;
width: .19rem;
height: .3rem;
margin-top: .4rem;
}
#canvas {
background: #f27d00;
border-radius: 50%;
overflow: hidden;
width: 2.52rem;
height: 2.52rem;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="Box">
<div class="wradius">
<canvas id="canvas" width="150" height="150"></canvas>
<div class="nradius">
<p>1111</p>
<h1>5175</h1>
</div>
</div>
</div>
</div>
</body>
</html>

canvas环形数据效果,这样的场景在实际项目中还是用的比较多的,关于canvas环形数据效果就介绍到这了。

回复

我来回复
  • 暂无回复内容