2021-07-02

        function openScreen() {
            let c = document.getElementById("open-screen");
            c.height = c.height //清空重新绘制
            let ctx = c.getContext("2d");
            ctx.lineWidth = 2;
            let arr = [30, 45, 60, 75, 90, 105, 120, 135, 150, 165, 180, 195, 210, 225, 240, 255, 270, 285, 300, 315, 330]

            for (let i = 18; i < 40; i++) {

                arr.forEach((item) => {
                    if (i > 30) {
                        ctx.strokeStyle = this.blackMore()
                    }
                    else {
                        ctx.strokeStyle = this.screenColor()
                    }
                    ctx.beginPath()
                    ctx.arc(195, 170, 3 * i, item * Math.PI / 180, (item + 13) * Math.PI / 180)
                    ctx.stroke()
                })
            }
        }

~~~html
        <canvas width="600px" height="300px" id='open-screen'></canvas>

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210702152139601.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI3ODg4OA==,size_16,color_FFFFFF,t_70#pic_center)