css实现半圆边框讲解 css画半圆环图 _生活百科

最近在看自己的头条权益的时候，看到这个信用分图片，出于职业的好奇心，研究一下这个半环图的画法。
实现这个半圆图，有两种方案。第一种方案，走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 = http://www.wokk.cn/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 = http://www.wokk.cn/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);【css实现半圆边框讲解 css画半圆环图】这个括号里有五个参数，分别是：圆心的x轴坐标，圆心的y轴坐标，圆环的起始点角度，圆环的终点角度，顺时针与否（true或者false）。

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：