dom部分
<div class='process-container circle-progress'>
<canvas id="canvas" class="canvas" width="100%" height="100%"></canvas>
</div>
js
DrawRound(percent) {
const canvas = document.getElementById("canvas")
const ctx = canvas.getContext("2d");
const Box=document.getElementsByClassName("process-container")[0]
canvas.width =Box.clientHeight
canvas.height=Box.clientHeight
const cx = canvas.width / 2, cy = canvas.height / 2, r = (canvas.width / 4) + 16
var img = new Image(); //创建图片对象
import("./images/Union.png").then(res => {
img.src = res.default
}) //设置绘制图像路径
img.onload = function () {
ctx.drawImage(img, cx / 2-10 , cy / 2 -10 , cx + 20, cy + 20)
}
//外边框
var img1 = new Image(); //创建图片对象
import("./images/outline.png").then(res => {
img1.src = res.default
}) //设置绘制图像路径
img1.onload = function () {
ctx.drawImage(img1, -2, -2, cx * 2, cy * 2)
}
//环形图的进度条
ctx.beginPath();
ctx.arc(cx , cy , r, Math.PI / 2, Math.PI / 2 - percent * (Math.PI * 2), false);
ctx.linewidth = 5;
ctx.lineCap = "round";
ctx.strokeStyle = "#06FFA5";
ctx.stroke();
ctx.beginPath();
ctx.arc(cx + 2, cy, r, Math.PI / 2 - percent * (Math.PI * 2) + 0.3, Math.PI / 2 - 0.3, false);
ctx.linewidth = 5;
ctx.lineCap = "round";
ctx.strokeStyle = "#f0f6f9";
ctx.stroke();
ctx.font="12px Open Sans-SemiBold, Open Sans"
ctx.fillStyle = "#ffffff";
ctx.fillText("设备总数",cx-25,cy-15);
},
//清空画布
clearCanvas(){
const theCanvas = document.getElementById("canvas")
const ctx = canvas.getContext("2d");
var w = theCanvas.width;
var h = theCanvas.height;
ctx.clearRect(0, 0, w, h);
},
//比如在组件挂载时启动定时器
let count=0
setInterval(()=>{
count++
this.clearCanvas()
this.DrawRound(0.1*count)
},3000)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。