用微信小程序的画布演示代码画了一个矩形后，发现小程序开发工具的控制台有一个警告提示：

Canvas 2d界面支持同层渲染，性能更好，建议切换。参见文档：https://developers . weixin . QQ.com/mini program/dev/component/canvas . html # canvas-2d-样例代码

根据文档，从2.9.0开始，基础库支持一个新的Canvas 2D接口(类型属性要指定)，同时支持同层渲染，不再维护原来的接口。

有必要使用画布2d吗

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

更好的性能

原来的画布界面不再维护。也就是说画布2d坑会少很多

canvas 2d的界面和h5的一样，不用来回看微信小程序canvas的特殊界面。例如，在这种无意义的用法中，笔画必须与draw一起使用。

支持同层渲染。虽然目前对我没什么用，但可以避免以后踩坑

画布2d的你好世界

转换原始演示：

页面结构

canvas id=' demo ' type=' 2d ' style=' width : 300 px；' height: 200px'/canvas

请注意，这里有两个重要的变化

属性画布-id被替换为id

添加了类型属性

射流研究…

const query=wx . createselectorquery()//创建dom元素节点查询器

query.select('#demo ')。字段({ //要获取的节点信息。

Node: true。//是否返回节点对应的节点实例

Size: true //是否返回节点大小(宽度高度)

}).exec((res)={

Const canvas=RES [0]。Node//canvas就是我们要操作的canvas节点

const CTX=canvas . getcontext(' 2d ')//获取2d模式下一个canvas节点的上下文对象

//如果不添加这一段，矩形的底部会显示不完整。我还没看懂。

const dpr=wx.getSystemInfoSync()。像素比率

canvas.width=res[0]。宽度* dpr

canvas.height=res[0]。高度* dpr

ctx.scale(dpr，dpr)

ctx.strokeStyle='#00ff00 '

ctx.lineWidth=5

ctx.rect(0，0，200，200)

ctx.stroke()

})

这与最初的演示有很大的不同

原来的setStrokeStyle被StrokeStyle的直接赋值所取代

怪画功能没了，很流行

我真的不明白为什么要重新计算宽度和高度

什么是同层渲染

原生组件的同层渲染：同层渲染是为了解决原生组件的层次问题。支持同层渲染后，原生组件和其他组件可以随意叠加，对层次的限制将不复存在。但是，应该注意的是，组件的内部仍然是本地呈现的，并且该样式对于本地组件的内部通常是无效的。目前视频、地图、live-player、live-pusher、canvas (2d)组件都支持同层渲染。

本机组件的相对级别：为了调整本机组件之间的相对级别位置，v2.7.0及以上版本的小程序支持在样式中声明z-index来指定本机组件的级别。z-index只调整本机组件之间的级别顺序，其级别仍然高于其他非本机组件。

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