前端用canvas画半环图，就是这么简单
最近在看自己的头条权益的时候，看到这个信用分图片，出于职业的好奇心，研究一下这个半环图的画法。
实现这个半圆图，有两种方案。第一种方案，走css路线，首先画一个整的圆环，通过两块挡板的旋转展现出一部分的环形。第二种方案，通过canvas画图实现半环图。我认为还是第二种方案更好实现。今天我就教大家如何使用canvas实现这个图。
首先创建一个html文件。在<body></body>标签里创建一个canvas标签，定义一下画布的大小。
<!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>score</title>
<style>
#score{
background: #333;
border-radius: 5px;
}
</style>
</head>
<body>
<canvas id="score" width="300" height="300" data-score='100'>
<span>你的浏览器不支持canvas元素，换个浏览器试试吧</span>
</canvas>
</body>
</html>然后开始写js，在canvas标签里画圆弧。
var c = document.getElementById('score');
var ctx=c.getContext("2d");
var value = c.attributes['data-score'].value;
const x0 = 150; // 圆心坐标
const y0 = 155;// 圆心坐标
const r1 = 130; // 外圆半径
const startAng = 145; // 起始角度
const endAng = 35;
// 根据半径和角度判断x轴坐标
function getPointX(r, ao) {
return x0 + r * Math.cos(ao * Math.PI / 180)
}
// 根据半径和角度判断Y轴坐标
function getPointY(r, ao) {
return y0 + r * Math.sin(ao * Math.PI / 180)
}
// 底层的圆弧 无色
ctx.beginPath();
ctx.arc(x0, y0, r1, (Math.PI / 180) * startAng, (Math.PI / 180) * endAng, false);
ctx.strokeStyle = "#666";
ctx.lineWidth = 10;
ctx.lineCap = 'round'; // 线的末端设置
ctx.stroke();在浏览器打开，出现的效果如下：
圆环已经初见成效。兴奋，激动，哈哈。这个圆弧是底层圆弧，是不会变动的。接下来画第二层圆弧，可以随着信用分变动的部分。上js代码
// 画外层的圆弧 有色,可变动
var blueAng=145+(250/100)*value; // 这里的value是可以根据信用分控制的
ctx.beginPath();
ctx.arc(x0, y0, r1, (Math.PI / 180) *startAng, (Math.PI / 180) * blueAng, false);
var linearGradient = ctx.createLinearGradient(0,0,250,0);
linearGradient.addColorStop(0,'#F6E259');
linearGradient.addColorStop(1,'#F4ECB6');
ctx.strokeStyle = linearGradient;
ctx.lineWidth = 9;
ctx.lineCap = 'round'; // 线的末端设置
ctx.stroke();请看效果图：
然后就是填充中间的文字，js代码如下：
// canvas中间的文
ctx.font = "normal 80px PingFangSC-Medium"; // 字体大小，样式
ctx.fillStyle = "#E8DA77";; // 颜色
ctx.textAlign = 'center'; // 位置
ctx.textBaseline = 'middle';
ctx.moveTo(150, 155); // 文字填充位置
ctx.fillText(value, 150, 310/2-30);
ctx.font = "normal 14px PingFangSC-Regular"; // 字体大小，样式
ctx.fillStyle = "#E8DA77"; // 颜色
ctx.fillText("评估于06-01 16:18:03", 150, 180);效果露一下啊：
说了这么多，附上完整代码，你可以直接粘贴复制看看效果。
<!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>score</title>
<style>
#score{
background: #333;
border-radius: 5px;
}
</style>
</head>
<body>
<canvas id="score" width="300" height="300" data-score='96'>
<span>你的浏览器不支持canvas元素，换个浏览器试试吧</span>
</canvas>
</body>
</html>
<script>
var c = document.getElementById('score');
var ctx=c.getContext("2d");
var value = c.attributes['data-score'].value;
const x0 = 150; // 圆心坐标
const y0 = 155;// 圆心坐标
const r1 = 130; // 外圆半径
const startAng = 145; // 起始角度
const endAng = 35;
// 根据半径和角度判断x轴坐标
function getPointX(r, ao) {
return x0 + r * Math.cos(ao * Math.PI / 180)
}
// 根据半径和角度判断Y轴坐标
function getPointY(r, ao) {
return y0 + r * Math.sin(ao * Math.PI / 180)
}
// 底层的圆弧 无色
ctx.beginPath();
ctx.arc(x0, y0, r1, (Math.PI / 180) * startAng, (Math.PI / 180) * endAng, false);
ctx.strokeStyle = "#666";
ctx.lineWidth = 10;
ctx.lineCap = 'round'; // 线的末端设置
ctx.stroke();
// 画外层的圆弧 有色,可变动
var blueAng=145+(250/100)*value; // 这里的value是可以根据信用分控制的
ctx.beginPath();
ctx.arc(x0, y0, r1, (Math.PI / 180) *startAng, (Math.PI / 180) * blueAng, false);
var linearGradient = ctx.createLinearGradient(0,0,250,0);
linearGradient.addColorStop(0,'#F6E259');
linearGradient.addColorStop(1,'#F4ECB6');
ctx.strokeStyle = linearGradient;
ctx.lineWidth = 9;
ctx.lineCap = 'round'; // 线的末端设置
ctx.stroke();
// canvas中间的文字
ctx.font = "normal 80px PingFangSC-Medium"; // 字体大小，样式
ctx.fillStyle = "#E8DA77";; // 颜色
ctx.textAlign = 'center'; // 位置
ctx.textBaseline = 'middle';
ctx.moveTo(150, 155); // 文字填充位置
ctx.fillText(value, 150, 310/2-30);
ctx.font = "normal 14px PingFangSC-Regular"; // 字体大小，样式
ctx.fillStyle = "#E8DA77"; // 颜色
ctx.fillText("评估于06-01 16:18:03", 150, 180);
// 下方0和100的位置
ctx.fillText("0", 46, 250);
ctx.fillText("100", 250, 250);
</script>附：
ctx.arc(x0, y0, r1, (Math.PI / 180) * startAng, (Math.PI / 180) * endAng, false);这个括号里有五个参数，分别是：圆心的x轴坐标，圆心的y轴坐标，圆环的起始点角度，圆环的终点角度，顺时针与否（true或者false）。
本文首发在今日头条，有兴趣可在头条搜索用户，洛海之音
