用canvas实现同心圆带坐标的雷达图

<template>
    <div>
        <canvas id="myCanvas" width="480" height="480" style="background: black;">
            实现同心圆带坐标的雷达图
        </canvas>
    </div>
</template>

<script>
export default {
    name: 'BugHomeView',
    data () {
        return {
        };
    },
    mounted () {
        this.getCanvas();
    },
    methods: {
        // canvas
        getCanvas () {
            let cav = document.getElementById("myCanvas");
            let ctx = cav.getContext("2d"); // 获取画笔
            // 画同心圆
            let w = 480;
            let h = 480;
            ctx.strokeStyle = "red"; // 线条颜色
            ctx.lineWidth = 1; // 线条宽度
            for (let r = 60; r <= 180; r += 60) {
                ctx.beginPath();
                ctx.arc(w / 2, h / 2, r, 0, 2 * Math.PI, true);
                ctx.stroke();
            }
            // canvas默认原点在画布的左上角 而且x轴向右，y轴向下
            // 改变原点
            ctx.translate(240, 240);
            ctx.scale(1, -1);
            // x轴
            ctx.beginPath();
            ctx.moveTo(-210, 0);
            ctx.lineTo(210, 0);
            ctx.stroke();
            // y轴
            ctx.beginPath();
            ctx.moveTo(0, -210);
            ctx.lineTo(0, 210);
            ctx.stroke();
            // x轴小三角
            ctx.beginPath();
            ctx.moveTo(210, -5);
            ctx.lineTo(210, 5);
            ctx.lineTo(220, 0);
            ctx.lineTo(210, -5);
            ctx.fiillStyle = "red";
            ctx.fill();
            ctx.stroke();
            // y轴小三角
            ctx.beginPath();
            ctx.moveTo(-5, 210);
            ctx.lineTo(5, 210);
            ctx.lineTo(0, 220);
            ctx.lineTo(-5, 210);
            ctx.fiillStyle = "red";
            ctx.fill();
            ctx.stroke();
        }
    },
};
</script>