使用 canvas 画饼图动画 0%到100%
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas 画饼图动画 0到100</title>
<style>
body {
margin: 0;
overflow: hidden
}
#mycans {
width: 100px;
height: 100px;
border: 1px solid #ddd;
margin: 100px auto;
display: block;
}
</style>
</head>
<body>
<canvas id="mycans"></canvas>
<script>
// 抓取元素
var mycans =document.querySelector('#mycans')
// 设置画布的宽度和高度
mycans.width =200;
mycans.height =200;
// 调用getContext(),返回给我们一个对象，这个对象里提供了若干个方法，供我们去绘制图形
var ctx = mycans.getContext('2d');
console.log(ctx);
let value = 0;
let timer = setInterval(()=>{
value += 0.005;
startDraw(value);
if(value>=1) {
clearInterval(timer);
}
}, 30)
function startDraw(value) {
// 开始绘制路径 画画
ctx.beginPath();
// 准备要使用的颜色
ctx.fillStyle ='pink';
// 设置当前线条的宽度
ctx,lineWidth =50;
// 画画 ----逆时针绘制300度的扇形
// 从圆心到弧线起点
// 开始绘制路径
ctx.moveTo(100,100);
// 圆心的坐标(100,100)
ctx.arc(100, 100, 100, -0.5*Math.PI, (value*2-0.5)*Math.PI, false);
// 再到终点，再闭合 （结束绘制路径）
ctx.fill();
ctx.closePath();
}
</script>
</body>
</html>
2024-01-14 20:08