微信小程序canvas2D全新API介绍

微信小程序canvas2D介绍

前言

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

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

• 全面支持源生H5 JS的写法，迁移H5代码更容易，学习成本更低
• 性能上的优化和提升，复杂动画上帧数明显
• BUG修复，以及一些不支持的条件完善

简介

获取canvas节点

<canvas type='2d' id='canvas'>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);
};

绘制文字