canvas之操场（椭圆）

椭圆）"/>

canvas之操场（椭圆）

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

        //画整圆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（[]）;清空