如图,要做一个操场形状的图形,由左半圆,右半圆,上下两条直线组成;
//画整圆
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([]);清空