微信小程序获取canvas上下文的不同方式

最新推荐文章于 2024-08-08 17:05:15 发布

废柴小z

最新推荐文章于 2024-08-08 17:05:15 发布

阅读量1.6k

点赞数 1

分类专栏：微信小程序&公众号

本文链接：https://blog.csdn.net/qq_34568700/article/details/118089792

版权

微信小程序&公众号专栏收录该内容

34 篇文章 3 订阅

订阅专栏

const crx1 = wx.createCanvasContext("#canvas")  // 1   微信小程序封装的绘图上下文：CanvasContext对象，有微信自己封装的绘图方法  保存canvas为图片时(wx.canvasToTempFilePath)，参数canvas的值是"canvas"字符串
var query = wx.createSelectorQuery()
query.select("#canvas")
            .fields({ node: true, size: true })
            .exec((res) => {
				var node = res[0].node;// 2   一个html node，canvas dom
				const ctx2 = node.getContext('2d')// 3 CanvasRenderingContext2D（如果canvas的type=2d则是CanvasRenderingContext2D ）   dom中的canvas绘图上下文，使用HTML的方式绘图  保存canvas为图片时(wx.canvasToTempFilePath)，参数canvas的值是node
			// const ctx2 = node.getContext('webgl')// 3 如果canvas的type=webgl则是WebGLRenderingContext 
})

exec回调函数中的res如下：
在这里插入图片描述
如果上图中的node值是null,是因为canvas没有加type="2d",加上即可