canvas画字帖格子

空

/**
 * @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();
};

田

/**
 * @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();
};

米

/**
 * @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();
}

井

/**
 * @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();
};

曲田格

/**
 * @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();
	};

竖线

/**
 * @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();
};

横线

/**
 * @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();
};

十点格

/**
 * @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();
};