按官方类似例子，画一个圆：
onReady() {
const query = wx.createSelectorQuery()
query.select('#myCanvas')
.fields({
node: true,
size: true
})
.exec((res) => {
const canvas = res[0].node
const ctx = canvas.getContext('2d')
const dpr = wx.getSystemInfoSync().pixelRatio
canvas.width = res[0].width * dpr
canvas.height = res[0].height * dpr
ctx.scale(dpr, dpr)
// canvas.width = res[0].width
// canvas.height = res[0].height
//画一个实心圆
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI, false);
ctx.fillStyle = "red"; //填充颜色,默认是黑色
ctx.fill(); //画实心圆
ctx.closePath();
})
}
我的问题是：
若将：
canvas.width = res[0].width * dpr canvas.height = res[0].height * dpr ctx.scale(dpr, dpr) 替换成： canvas.width = res[0].width canvas.height = res[0].height 绘制结果一模一样，但若将ctx.scale(dpr, dpr)去掉，图像缩小一倍（dpr=2），按说去掉ctx.scale(dpr, dpr)后，只是画布尺寸增大一倍罢了。 为什么会这样？绘制结果和画布大小还有关系？
图形并不是缩小了一倍，它尺寸就没有变过(半径 50px)，因为你使用了 canvas.width canvas.height 去放大整个画布的尺寸，例如由 500px 放大到了1000px，但是画布内的1px 依旧是1px(这也是你说它“缩小”的原因 但它其实就没变化过)，除非你用 scale 去放大画布里的尺寸scale(2)，这时你写 1px 它会实际放到到 2px 半径 50px 会放大至 100px，视觉上就是图形变更大了。
根据 pixelRatio 来缩放画布是为了解决在高 pixelRatio 上图片模糊的问题。
canvas是用px为单位的，你说的dpr=2并不是绝对的，这和手机屏幕有关，分辨率越高dpr越大。
设备像素比（dpr） = 设备像素（分辨率）/设备独立像素（屏幕尺寸）
我觉得，这可能和css中设置的尺寸有关，只是猜测，没有找到文档。
那你canvas.width和height别直接*dpr，直接赋值res[0].width，或者拿屏幕宽高做转换