微信小程序: canvas 2d 接口支持同层渲染且性能更佳，建议切换使用

在使用微信小程序的 canvas demo 代码绘制了一个矩形之后whatsapp网页版，发现小程序开发工具的 console 中有警告提示：

canvas 2d 接口支持同层渲染且性能更佳，建议切换使用。详见文档：https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html#Canvas-2D-%E7%A4%BA%E4%BE%8B%E4%BB%A3%E7%A0%81

文档里说，基础库 2.9.0 起支持一套新 Canvas 2D 接口（需指定 type 属性），同时支持同层渲染whatsapp登录，原有接口不再维护。

是否有必要使用 canvas 2d

我觉得是有必要的，虽然原来的代码也能执行。但是 canvas 2d 带来的好处非常吸引人：

canvas 2d 的 hello world

将原来的 demo 进行一下改造：

wxml

注意whatsapp网页版，这里有两处显著的改动

js

const query = wx.createSelectorQuery()  // 创建一个dom元素节点查询器
query.select('#demo')
	.fields({   			// 需要获取的节点相关信息
		node: true,       // 是否返回节点对应的 Node 实例
		size: true         // 是否返回节点尺寸（width height）
	}).exec((res) => {
		const canvas = res[0].node                // canvas就是我们要操作的画布节点
		const ctx = canvas.getContext('2d')   // 以2d模式，获取一个画布节点的上下文对象
                
                // 不加这段，矩形底部会显示不全，我还没看懂
		const dpr = wx.getSystemInfoSync().pixelRatio
		canvas.width = res[0].width * dpr
		canvas.height = res[0].height * dpr
		ctx.scale(dpr, dpr)
		ctx.strokeStyle = "#00ff00"
		ctx.lineWidth = 5
		ctx.rect(0, 0, 200, 200)
		ctx.stroke()
	})

这里与原 demo 差异巨大

什么是同层渲染

从文档的解释来看，主要是针对多个原生组件的层级处理。而 canvas 2d 也是原生组件。

继续阅读