<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style lang="scss">
.box {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="time-graph">
<canvas id="time-graph-canvas1" class="box" width="500" height="200"></canvas>
<canvas id="time-graph-canvas2" class="box" width="500" height="200"></canvas>
<canvas id="time-graph-canvas3" class="box" width="500" height="200"></canvas>
</div>
<script>
function drawMain(drawing_elem, percent, radius, text, color) {
/*
@drawing_elem: 绘制对象
@percent：绘制圆环百分比, 范围[0, 100]
@color: 绘制圆环的前景色，颜色代码
*/
var context = drawing_elem.getContext("2d");
var center_x = drawing_elem.width / 2;
var center_y = drawing_elem.height / 2;
var rad = Math.PI*2/100;
var speed = 0;
// 绘制背景圆圈
// function backgroundCircle(){
// context.save();
// context.beginPath();
// context.lineWidth = 8; //设置线宽
// var radius = center_x - context.lineWidth;
// context.lineCap = "round";
// context.strokeStyle = bgcolor;
// context.arc(center_x, center_y, radius, 0, Math.PI*2, false);
// context.stroke();
// context.closePath();
// context.restore();
// }
//绘制运动圆环
function addCircle(n){
context.save();
context.strokeStyle = color;
context.lineWidth = 8;
var r = radius - context.lineWidth;
context.lineCap = "round";
context.beginPath();
context.arc(center_x, center_y, r , -Math.PI/2, -Math.PI/2 +n*rad, false); //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
context.stroke();
context.closePath();
context.restore();
}
//绘制文字
function addText(){
context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
context.fillStyle = "#999";
var font_size = 14;
context.font = font_size + "px Helvetica";
var w = context.measureText(text).width;
var r = radius - context.lineWidth;
context.fillText(text, center_x-w/2-24, center_y - r + 10 );
context.restore();
}
//绘制直线
function addLine() {
let x1 = center_x + radius;
let x2 = x1;
let y1 = center_y;
let y2 = center_y;
let t = '';
if (text === '日本') {
t = '7.7%';
x1 -= 20;
x2 = x1 + 60;
y1 = center_y - 40;
y2 = center_y - 40;
}else if (text === '美国') {
t = '6.4%';
x1 -= 4;
x2 = x1 + 60;
}else if (text === '中国') {
t = '3.6%';
x1 -= 20;
x2 = x1 + 60;
y1 = center_y + 40;
y2 = center_y + 40;
}
context.save();
context.beginPath();
context.lineWidth = 1;
context.lineCap = 'square';
context.strokeStyle = color;
context.moveTo (x1, y1);
context.lineTo (x2, y2);
context.stroke();
context.arc(x2, y2, 4, 0, 2 * Math.PI);
context.fillStyle = color;
context.fill();
context.fillStyle = 'black';
context.font = "14px Helvetica";
context.fillText(t, x2 + 10, y2 + 4);
context.restore();
}
//执行动画
(function drawFrame(){
if(speed >= percent) {
addLine();
}else {
window.requestAnimationFrame(drawFrame);
context.clearRect(0, 0, drawing_elem.width, drawing_elem.height);
addText();
addCircle(speed);
speed += 1;
}
}());
}
</script>
<script>
window.onload = () => {
this.drawMain(document.getElementById("time-graph-canvas1"), 77, 78, "日本", "#5c5bf6");
this.drawMain(document.getElementById("time-graph-canvas2"), 64, 62.5, "美国", "#00c6ff");
this.drawMain(document.getElementById("time-graph-canvas3"), 36, 45, "中国", "#00ff4e");
}
</script>
</body>
</html>
下面是效果：
