canvas之操场（椭圆）

最新推荐文章于 2025-04-17 17:01:48 发布

RAY_CHEN.

最新推荐文章于 2025-04-17 17:01:48 发布

阅读量635

点赞数

文章标签： canvas

本文链接：https://blog.csdn.net/weixin_44707050/article/details/121076763

版权

本文介绍了一个使用Canvas API绘制操场形状的方法，包括如何绘制左半圆、上直线、右半圆及下直线，并详细解释了如何根据需求调整线条样式为实线或虚线。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如图，要做一个操场形状的图形，由左半圆，右半圆，上下两条直线组成；

        //画整圆
        completeCircleFun(x0, y0, r0, y1, y2, x1, y3, c) {
            //左半圆
            this.leftCircleFun(x0, y0, r0, c);
            //上直线
            this.topLineFun(x0, y1, y2, c);
            // //右半圆
            this.rightCircleFun(x1, y0, r0, c);
            // //下直线
            this.bottomLineFun(y2, y3, x0, c);
        },
        //每个部分的函数（）需要判断是否需要断点）
        //左半圆
        leftCircleFun(x0, y0, r0, c) {
            // console.log(c)
            if (c.indexOf("A3") != -1) {
                //
                this.ctx.beginPath();
                this.ctx.setLineDash([3, 10]);
                this.ctx.arc(x0, y0, r0, Math.PI / 2, (Math.PI * 3) / 2);
                this.ctx.strokeStyle = "#FFE922";
                this.ctx.lineWidth = 1;
                this.ctx.stroke();
            } else {
                this.ctx.beginPath();
                this.ctx.setLineDash([]);

                this.ctx.arc(x0, y0, r0, Math.PI / 2, (Math.PI * 3) / 2);
                this.ctx.strokeStyle = "#FFE922";
                this.ctx.lineWidth = 1;
                this.ctx.stroke();
            }
        },
        //上直线
        topLineFun(x0, y1, y2, c) {
            if (c.indexOf("A2") != -1) {
                //
                this.ctx.beginPath();
                this.ctx.setLineDash([3, 10]);
                this.ctx.moveTo(x0, y1); //设置起点状态
                this.ctx.lineTo(y2, y1); //设置末端状态
                this.ctx.lineWidth = 1; //设置线宽状态
                this.ctx.strokeStyle = "#FFE922"; //设置线的颜色状态
                this.ctx.stroke();
            } else {
                this.ctx.beginPath();
                this.ctx.setLineDash([]);
                this.ctx.moveTo(x0, y1); //设置起点状态
                this.ctx.lineTo(y2, y1); //设置末端状态
                this.ctx.lineWidth = 1; //设置线宽状态
                this.ctx.strokeStyle = "#FFE922"; //设置线的颜色状态
                this.ctx.stroke();
            }
        },
        //右半圆
        rightCircleFun(x1, y0, r0, c) {
            if (c.indexOf("A1") != -1) {
                //
                // console.log("存在");
                this.ctx.beginPath();
                this.ctx.setLineDash([3, 10]);
                this.ctx.arc(x1, y0, r0, (Math.PI * 3) / 2, Math.PI / 2);
                this.ctx.strokeStyle = "#FFE922";
                this.ctx.lineWidth = 1;
                this.ctx.stroke();
            } else {
                // console.log("不存在");
                this.ctx.setLineDash([]);
                this.ctx.beginPath();
                this.ctx.arc(x1, y0, r0, (Math.PI * 3) / 2, Math.PI / 2);
                this.ctx.strokeStyle = "#FFE922";
                this.ctx.lineWidth = 1;
                this.ctx.stroke();
            }
        },
        //下直线
        bottomLineFun(y2, y3, x0, c) {
            // if (c.indexOf("D") != -1) {
            //     //
            //     this.ctx.beginPath();
            //     this.ctx.setLineDash([5,10]);
            //     this.ctx.moveTo(y2, y3); //设置起点状态
            //     this.ctx.lineTo(x0, y3); //设置末端状态
            //     this.ctx.lineWidth = 1; //设置线宽状态
            //     this.ctx.strokeStyle = "#FFE922"; //设置线的颜色状态
            //     this.ctx.stroke();
            // } else {
            this.ctx.setLineDash([]);

            this.ctx.beginPath();

            this.ctx.moveTo(y2, y3); //设置起点状态
            this.ctx.lineTo(x0, y3); //设置末端状态
            this.ctx.lineWidth = 1; //设置线宽状态
            this.ctx.strokeStyle = "#FFE922"; //设置线的颜色状态
            this.ctx.stroke();
            // }
        }

说明：当实线和虚线相接，虚线设置用ctx.setlineDash;

当上一段是虚线，下一段想用实线，需要先清除虚线设置ctx.setlineDash（[]）;清空