微信小程序canvas2D全新API介绍

最新推荐文章于 2025-07-17 11:22:49 发布

原创

最新推荐文章于 2025-07-17 11:22:49 发布 · 1.3w 阅读

57 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #canvas #前端

本文介绍了微信小程序从2.9.0版本开始支持的canvas 2D新API，强调了它全面支持H5 JS语法、性能优化以及BUG修复等优点。详细讲解了如何获取canvas节点、绘制图片和文字，包括对齐方式和显示方向的设置，以及在实际使用中可能遇到的canvas尺寸和图片层级问题的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

微信小程序canvas2D介绍

微信小程序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);
};