vue + canvas绘制扇形圆盘

最新推荐文章于 2024-05-22 11:05:55 发布

撑起自己半边天

最新推荐文章于 2024-05-22 11:05:55 发布

阅读量1.4k

点赞数 1

分类专栏： canvas 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43840289/article/details/124188620

版权

canvas 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

vue + canvas绘制扇形圆盘

html：

<canvas style="position: fixed;z-index:-1" width="545" height="545"></canvas>

js:

mounted() {
        // cnavas画块
       let oCanvas = document.querySelector("canvas");
     // 2.从canvas中拿到绘图工具
        let oCtx = oCanvas.getContext("2d");
        //绘制个数
        let len = 10
        //每个扇形占的份额,一个圆的总额是2，看下图
        let portion = (2/len).toFixed(3)
        for(var i = 0 ; i<len;i++){
        //绘制的起点
        oCtx.moveTo(272, 272);
        //arc的4个参数分别是（x,y,起始角度,结束角度）
        oCtx.arc(272, 272, 210,((portion*i)+0.01)*Math.PI, ((i+1)*portion)*Math.PI);
        //关闭路径
        oCtx.closePath();
        //填充颜色
        oCtx.fillStyle = '#c59696'
        //绘制
        oCtx.fill();
        }
    },