uni的canvas组件，其组件命名写法与Html5一致，但其编译后的H5版本，实际上对canvas组件进行了修改，大致为：
# 原
<canvas canvas-id="my_canvas" class="my-canvas"></canvas>
# 编译后H5版本
<uni-canvas data-v-3cc3b8e9="" canvas-id="my_canvas" class="my-canvas">
<canvas width="600" height="300"></canvas>
<div style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden;"></div>
<uni-resize-sensor><div><div></div></div><div><div></div></div></uni-resize-sensor>
</uni-canvas>以上为H5版本开发环境实际编译代码示例，Chrome模拟环境为iPhone6/7/8。
问题1: 查看该元素，可以看到其实际上在页面上的大小为300*150，与canvas组件上声明的宽高并不一致，且修改模拟环境为iPhoneX, 可以看到其倍数关系变为3倍。这意思是说，canvas的宽高单位不是px, 而是rpx ？
问题2: 那么若需要动态设置canvas的宽高，H5版本我该如何获取canvas并设置其宽高？
使用uni.createSelectorQuery() + selectorQuery.select(selector) + nodesRef.node(callback) 应该是获取canvas的方式，但此处nodesRef.node(callback) H5端是不支持的。
而使用：
// #ifdef H5
let canvas = document.querySelector('.my-canvas > canvas')
let ctx = canvas.getContext('2d')
canvas.width = width
canvas.height = height
// #endif却发现，实际效果上，canvas的宽高是显示了设置的值，然而这没有用，其实际显示尺寸依然是默认的300150，检查元素可看到uni-canvas, canvas均是默认的300150
求教，以uni canvas的模式，我该如何使用？
2 个回复
1***@qq.com
只能第一次载入动态赋值style样式修改大小，后面不能动态修改样式
1***@qq.com
我也求教，以uni canvas的模式，我该如何使用
GraceLeeau (作者)
没有得到官方的回复，后面在H5端我是这样用的，不通过
canvas.width/height来设置，而是给canvas设置变量控制其宽高样式，修改这个变量来达到想要修改canvas宽高的目的。我在遇到这个问题的项目中，总结了几点uni canvas H5端的注意事项，可以看看
关于uni的canvas组件H5端需要注意的
uni对于canvas在H5端的实现，做了大小重置，浏览器审查元素可以发现，设置的canvas style, 将应用在其外部的uni-canvas, 而内部实际的canvas的width, height，其数值为所设置大小的SystemInfo.pixelRatio倍，若未设置，则为默认的300px, 150px的SystemInfo.pixelRatio倍。因此，需要注意以下几点：
动态设置canvas的大小，应通过其style来实现，而不要直接获取canvasEle，用canvasEle.width/height设置
canvas动态改变大小后，需延迟绘图，否则绘图内容可能不显示或一闪而过
绘制时，尺寸计算以设置的style为准
a)ctx = uni.createCanvasContext() b)ctx = canvasEle.getContext('2d'),
a和b所得到的ctx，其所拥有的方法略有差异，前者有ctx.draw(), 后者则无此方法，具体以uni文档及H5canvas方法为准
drawImage()方法，其image参数定义，前者为imagePath, 后者则为Image对象，此为微信小程序与H5 canvas的差异
前者在onReady中绘图，也需延迟并调用ctx.draw(); 在onLoad中绘图无效；其他时候绘图均需调用ctx.draw()
uni.canvasToTempFilePath()得到的image的大小，为设置大小的SystemInfo.pixelRatio倍
2020-03-16 11:58