微信小程序canvas2D全新API介绍，我们用最详细的方式解析前端消息机制的源码

==================================================================================

前言

---

微信小程序官方在2.9.0开始支持了一个canvas 2D的新API，之前的API不再进行维护，因此之后使用canvas的项目，都建议使用canvas 2D来绘制。

那么新的canvas2D API有啥好处呢？

• 全面支持源生H5 JS的写法，迁移H5代码更容易，学习成本更低

• 性能上的优化和提升，复杂动画上帧数明显

• BUG修复，以及一些不支持的条件完善

简介

---

获取canvas节点

const query = wx.createSelectorQuery();

query

.select(‘#canvas’)

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

.exec((res) => {

const canvas = res[0].node;

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

})

绘制图片

const headerImg = canvas.createImage();

headerImg.src = this.data.userInfo.avatar_url;

headerImg.onload = () => {

ctx.drawImage(headerImg, 0, 0, 56, 56);

};<