空
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/577ecaef460d0236708260dcb17dd436.png)
/**
* @params ctx canvas绘图上下文
* @params sx 横坐标
* @params sy 纵坐标
* @params w 宽度
*/
export const Kong = (ctx, sx, sy, w) => {
//画矩形
ctx.strokeStyle = "red";
ctx.lineWidth = 1;
ctx.strokeRect(sx, sy, w - 1, w - 1);
ctx.save();
};
田
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/bad6f7b7f56812dfb82d2563357a2382.png)
/**
* @params ctx canvas绘图上下文
* @params sx 横坐标
* @params sy 纵坐标
* @params w 宽度
*/
export const Tian = (ctx, sx, sy, w) => {
//画矩形
ctx.strokeStyle = "red";
ctx.lineWidth = 1;
ctx.strokeRect(sx, sy, w - 1, w - 1);
ctx.save();
//设置虚线样式
ctx.lineWidth = 0.5;
ctx.beginPath();
ctx.setLineDash([2, 2]); //创建2像素长,间隔为2像素的虚线
ctx.strokeStyle = "red";
let half = w / 2;
//定义横线
ctx.moveTo(sx - 1, half + sy);
ctx.lineTo(w + sx - 1, half + sy);
//定义竖线
ctx.moveTo(half + sx, sy);
ctx.lineTo(half + sx, w + sy);
//画定义好的线
ctx.stroke();
//关闭路径
ctx.closePath();
ctx.restore();
};
米
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/3fb3643f55c706681b21ea227c1da01b.png)
/**
* @params ctx canvas绘图上下文
* @params sx 横坐标
* @params sy 纵坐标
* @params w 宽度
*/
export const Mi = (ctx, sx, sy, w) => {
//画矩形
ctx.strokeStyle = "red";
ctx.lineWidth = 1;
ctx.strokeRect(sx, sy, w - 1, w - 1);
ctx.save();
//设置虚线样式
ctx.lineWidth = 0.5;
ctx.beginPath();
ctx.setLineDash([2, 2]); //创建2像素长,间隔为2像素的虚线
ctx.strokeStyle = "red";
let half = w / 2;
//定义横线
ctx.moveTo(sx - 1, half + sy);
ctx.lineTo(w + sx - 1, half + sy);
//定义竖线
ctx.moveTo(half + sx, sy);
ctx.lineTo(half + sx, w + sy);
//定义交叉线1
ctx.moveTo(sx, sy);
ctx.lineTo(sx + w, sy + w);
//定义交叉线2
ctx.moveTo(sx - 1, sy + w);
ctx.lineTo(sx + w, sy - 1);
//画定义好的线
ctx.stroke();
//关闭路径
ctx.closePath();
ctx.restore();
}
井
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/c391228361c6c7f4a3b2bf3b205b220d.png)
/**
* @params ctx canvas绘图上下文
* @params sx 横坐标
* @params sy 纵坐标
* @params w 宽度
*/
export const Jing = (ctx, sx, sy, w) => {
//画矩形
ctx.strokeStyle = "red";
ctx.lineWidth = 1;
ctx.strokeRect(sx, sy, w - 1, w - 1);
ctx.save();
//设置虚线样式
ctx.lineWidth = 0.5;
ctx.beginPath();
ctx.setLineDash([2, 2]); //创建2像素长,间隔为2像素的虚线
ctx.strokeStyle = "red";
let half = w / 3;
//定义横线1
ctx.moveTo(sx - 1, half + sy);
ctx.lineTo(w + sx - 1, half + sy);
//定义横线2
ctx.moveTo(sx - 1, half + half + sy);
ctx.lineTo(w + sx - 1, half + half + sy);
//定义竖线1
ctx.moveTo(half + sx, sy);
ctx.lineTo(half + sx, w + sy);
//定义竖线2
ctx.moveTo(half + half + sx, sy);
ctx.lineTo(half + half + sx, w + sy);
//画定义好的线
ctx.stroke();
//关闭路径
ctx.closePath();
ctx.restore();
};
曲田格
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/ab6a88fcd9b2457fb62aea48fef7a5ee.png)
/**
* @params ctx canvas绘图上下文
* @params sx 横坐标
* @params sy 纵坐标
* @params w 宽度
*/
export const QuTianGe = (ctx, sx, sy, w) => {
//画矩形
ctx.strokeStyle = "red";
ctx.lineWidth = 1;
ctx.strokeRect(sx, sy, w - 1, w - 1);
ctx.save();
//画圆点
let quarter = w / 4; //四分之一
ctx.beginPath();
ctx.arc(sx + quarter * 3, sy + quarter * 3, 0.5, 0, 2 * Math.PI);
ctx.fillStyle = "red";
ctx.fill();
ctx.stroke();
ctx.save();
//设置虚线样式
ctx.lineWidth = 0.5;
ctx.beginPath();
ctx.setLineDash([2, 2]); //创建2像素长,间隔为2像素的虚线
ctx.strokeStyle = "red";
let half = w / 2;
//定义横线
ctx.moveTo(sx - 1, half + sy);
ctx.lineTo(w + sx - 1 - 3, half + sy - 3);
//定义竖线
ctx.moveTo(half + sx, sy);
ctx.lineTo(half + sx, w + sy - 3);
//定义里面的上横线
ctx.moveTo(sx + quarter - 1, sy + quarter);
ctx.lineTo(sx + quarter * 3, sy + quarter - 3);
//定义里面的右竖线
ctx.moveTo(sx + quarter * 3, sy + quarter - 3);
ctx.lineTo(sx + quarter * 3, sy + quarter * 3);
//定义里面的下横线
ctx.moveTo(sx + quarter * 3, sy + quarter * 3);
ctx.lineTo(sx + quarter - 2, sy + quarter * 3 - 2);
//定义里面的左竖线的下半部分
ctx.moveTo(sx + quarter - 2, sy + quarter * 3 - 2);
ctx.lineTo(sx + quarter, sy + quarter * 2);
//定义里面的左竖线的上半部分
ctx.moveTo(sx + quarter, sy + quarter * 2);
ctx.lineTo(sx + quarter - 1, sy + quarter);
//画定义好的线
ctx.stroke();
//关闭路径
ctx.closePath();
ctx.restore();
};
竖线
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/b91fee571cc68235635775b13cc2ed06.png)
/**
* @params ctx canvas绘图上下文
* @params sx 横坐标
* @params sy 纵坐标
* @params w 宽度
*/
export const ShuXian = (ctx, sx, sy, w) => {
//开始画路径
ctx.beginPath();
//定义线
ctx.lineWidth = 1; //线的宽度
ctx.moveTo(sx + w, sy); //起始位置
ctx.lineTo(sx + w, sy + w); //结束位置
ctx.strokeStyle = "red"; //线的颜色
//画定义好的线
ctx.stroke();
//关闭路径
ctx.closePath();
ctx.restore();
};
横线
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/3d95396b2df2958bd2626887c178d507.png)
/**
* @params ctx canvas绘图上下文
* @params sx 横坐标
* @params sy 纵坐标
* @params w 宽度
*/
export const HengXian = (ctx, sx, sy, w) => {
//开始画路径
ctx.beginPath();
//定义线
ctx.lineWidth = 1; //线的宽度
ctx.moveTo(sx, sy + w); //起始位置
ctx.lineTo(sx + w, sy + w); //结束位置
ctx.strokeStyle = "red"; //线的颜色
//画定义好的线
ctx.stroke();
//关闭路径
ctx.closePath();
ctx.restore();
};
十点格
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/e0bf81de9f6a05c3e83c931d38900e31.png)
/**
* @params ctx canvas绘图上下文
* @params sx 横坐标
* @params sy 纵坐标
* @params w 宽度
*/
export const ShiDianGe = (ctx, sx, sy, w) => {
//画矩形
ctx.strokeStyle = "red";
ctx.lineWidth = 1;
ctx.strokeRect(sx, sy, w - 1, w - 1);
ctx.save();
//画圆点
let quarter = w / 4; //四分之一
ctx.beginPath();
ctx.arc(sx + quarter * 3, sy + quarter * 3, 0.5, 0, 2 * Math.PI);
ctx.fillStyle = "red";
ctx.fill();
ctx.stroke();
ctx.save();
//设置虚线样式
ctx.lineWidth = 0.5;
ctx.beginPath();
ctx.setLineDash([2, 2]); //创建2像素长,间隔为2像素的虚线
ctx.strokeStyle = "red";
let half = w / 2;
//定义横线
ctx.moveTo(sx - 1, half + sy);
ctx.lineTo(w + sx - 1 - 3, half + sy - 3);
//定义竖线
ctx.moveTo(half + sx, sy);
ctx.lineTo(half + sx, w + sy - 3);
//画定义好的线
ctx.stroke();
//关闭路径
ctx.closePath();
ctx.restore();
};