canvas画田字格、米字格、田回格、米回格等字帖格子记录

终于在小程序里实现了生成字帖并下载的功能,写个文章记录一下。

1、关于字体的使用

小程序默认字体不适合书法字体,所以需要引入外部字体,这里引入楷体字体。

注意点:小程序引入字体不支持本地路径,需要使用网络路径。

1.1、引入代码

let family = 'kaiti'

let fontUrl = 'https://spkf-zsxn-prod.s3.cn-north-1.amazonaws.com.cn/pic/livecenter/kaiti.ttf'

let self = this

uni.loadFontFace({
global: true, // 是否全局生效
family: family, // 定义的字体名称
source: 'url("'+fontUrl+'")', // 字体资源的地址。格式为 TTF 和 WOFF,WOFF2 在低版本的iOS上会不兼容。
success() {
console.log('成功的回调函数')
//业务代码
}
},
fail(){
console.log('失败的回调函数')
},
complete(){
//console.log('接口调用结束的回调函数(调用成功、失败会执行)')
},
scopes: ["webview", "native"],
})

2、画格子

ctx:画布context对象,获取代码

const query = uni.createSelectorQuery()
query.select('#myCanvas')
.fields({
node: true,
size: true
})
.exec((res) => {

let canvas = res[0].node
this.canvas = canvas
this.ctx = canvas.getContext('2d')


sx:x轴开始位置

sy:y轴开始位置

w:格子宽高

drawSimpleUnreal(ctx,sx,sy,w){
let half = w / 2;
ctx.strokeStyle = '#FF0000';
ctx.lineWidth = 1;
ctx.strokeRect(sx,sy, w - 1, w - 1);
ctx.save();
ctx.lineWidth = 1;
ctx.beginPath();
ctx.setLineDash([3,3]); //创建5像素长,间隔为5像素的虚线
ctx.strokeStyle = '#e33f3f';
//横线
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();
},



drawMizige(ctx,sx,sy,w){
let half = w / 2;
ctx.strokeStyle = '#FF0000';
ctx.lineWidth = 1;
ctx.strokeRect(sx,sy, w - 1, w - 1);
ctx.save();
ctx.lineWidth = 1;
ctx.beginPath();
ctx.setLineDash([3,3]); //创建5像素长,间隔为5像素的虚线
ctx.strokeStyle = '#ec8e8e';
//横线
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();
},



drawTianhuige(ctx,sx,sy,w){
let half = w / 2;
ctx.strokeStyle = '#FF0000';
ctx.lineWidth = 1;
ctx.strokeRect(sx,sy, w - 1, w - 1);
ctx.save();
ctx.lineWidth = 1;
ctx.beginPath();
ctx.setLineDash([3,3]); //创建5像素长,间隔为5像素的虚线
ctx.strokeStyle = '#ec8e8e';
//横线
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.strokeRect(sx+10,sy+10, w - 20, w - 20);
ctx.stroke();
ctx.closePath();
ctx.restore();
},



drawMihuige(ctx,sx,sy,w){
let half = w / 2;
ctx.strokeStyle = '#FF0000';
ctx.lineWidth = 1;
ctx.strokeRect(sx,sy, w - 1, w - 1);
ctx.save();
ctx.lineWidth = 1;
ctx.beginPath();
ctx.setLineDash([3,3]); //创建5像素长,间隔为5像素的虚线
ctx.strokeStyle = '#ec8e8e';
//横线
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, sy+w);
ctx.lineTo(sx+w, sy);
//小正方形
ctx.strokeRect(sx+10,sy+10, w - 20, w - 20);
ctx.stroke();
ctx.closePath();
ctx.restore();
},



drawFangge(ctx,sx,sy,w){
let half = w / 2;
ctx.strokeStyle = '#FF0000';
ctx.lineWidth = 1;
ctx.strokeRect(sx,sy, w - 1, w - 1);
ctx.save();


ctx.stroke();
ctx.closePath();
ctx.restore();
},

3、效果图


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容