canvas画字帖格子

字帖格子"/>

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);//定义交叉线1ctx.moveTo(sx, sy);ctx.lineTo(sx + w, sy + w);//定义交叉线2ctx.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;//定义横线1ctx.moveTo(sx - 1, half + sy);ctx.lineTo(w + sx - 1, half + sy);//定义横线2ctx.moveTo(sx - 1, half + half + sy);ctx.lineTo(w + sx - 1, half + half + sy);//定义竖线1ctx.moveTo(half + sx, sy);ctx.lineTo(half + sx, w + sy);//定义竖线2ctx.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();
};