微信小程序canvas2D全新API介绍

绘制文字

CanvasRenderingContext2D.textAlign

设置文本水平对齐方式。支持属性值有：start（默认值），end，left，right以及center。

CanvasRenderingContext2D.textBaseline

设置文本基线对齐方式。支持属性值有：top，hanging，middle，alphabetic（默认值），ideographic，bottom。

CanvasRenderingContext2D.direction

设置文本显示方向。支持属性值有：inherit（默认值），ltr和rtl。

ctx.font = ‘bold 10px serif’;

ctx.fillStyle = ‘#9B9B9B’;

ctx.textAlign = ‘center’;

ctx.textBaseline = ‘middle’;

ctx.fillText(‘你想要绘制的文字:’, 0, 0);

绘制换行文字

/**

• canvas绘制换行文字

• @param

• ctx：canvas的 2d 对象

• t：绘制的文字

• x,y:文字坐标

• w：文字最大宽度

*/

drawtext(ctx, t, x, y, w) {

const chr = t.split(‘’);

let temp = ‘’;

const row = [];

for (let a = 0; a < chr.length; a++) {

if (

ctx.measureText(temp).width < w &&

ctx.measureText(temp + chr[a]).width <= w

) {

temp += chr[a];

} else {

row.push(temp);

temp = chr[a];

}

}

row.push(temp);

for (let b = 0; b < row.length; b++) {

ctx.fillText(row[b], x, y + b * 14); //每行字体y坐标间隔14

}

},

保存canvas

const query = wx.createSelectorQuery();

const canvasObj = await new Promise((resolve, reject) => {

query.select(‘#canvas’)

.fields({ node: true, size: true })

.exec(async (res) => {

resolve(res[0].node);

})

});

wx.canvasToTempFilePath({

x: 0,

y: 0,

width: this.data.windowWidth * 0.785,

height: this.data.windowHeight * 0.5,

destWidth: (this.data.canvasWidth * 750) / this.data.windowWidth,

destHeight:

(((this.data.canvasWidth * 750) / this.data.windowWidth) * 785) / 500,

canvas: canvasObj, //现在的写法

quality: 1,

success: (res) => {

wx.saveImageToPhotosAlbum({

filePath: res.tempFilePath,

success: () => {

this.setData({

showModal: false,

});

app.toast(‘保存成功！’);

},

});

},

});

踩坑

---

canvas尺寸问题

在H5中，canvas是存在width、height属性设置canvas的宽高，而在小程序中并没有这两个属性，通过HTML内联样式或者CSS样式则只是简单裁剪了canvas，并没有实现canvas整个画布的缩放/扩大，因此我们需要运用JS去实现canvas宽高的调整

const query = wx.createSelectorQuery();

query

.select(‘#canvas’)

.fields({ node: true, size: true })

.exec((res) => {

console.log(res);

const canvas = res[0].node;

const ctx = canvas.getContext(‘2d’);

const dpr = wx.getSystemInfoSync().pixelRatio;

canvas.width = res[0].width * dpr;

canvas.height = res[0].height * dpr;

ctx.scale(dpr, dpr);

})

绘制图片层级问题

由于绘制图片为异步操作，且图片大小不一致，因此绘制图片很有可能导致图片小的先绘制，从而导致绘制层级不尽如人意。在微信小程序中，建议背景大图沿用之前的方法，在页面onLoad函数中获取图片信息，使用临时地址绘制，这样就可以保证背景大图的绘制速度。

wx.getImageInfo({

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！