canvas环型比例图

举起来

于 2022-08-23 18:29:33 发布

阅读量117

点赞数

分类专栏： js学习

本文链接：https://blog.csdn.net/weixin_43822097/article/details/126489925

版权

JavaScript canvas 环形进度条动态动画图片绘制

关键词由CSDN通过智能技术生成

js学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

dom部分

 <div class='process-container circle-progress'>
                <canvas id="canvas" class="canvas" width="100%" height="100%"></canvas>
            </div>

 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)