收藏
回答

canvas 2D画图尺寸的问题的问题?

按官方类似例子,画一个圆:

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)后,只是画布尺寸增大一倍罢了。

 为什么会这样?绘制结果和画布大小还有关系?


回答关注问题邀请回答
收藏

3 个回答

  • 涂之包
    涂之包
    03-25

    canvas是用px为单位的,你说的dpr=2并不是绝对的,这和手机屏幕有关,分辨率越高dpr越大。

    设备像素比(dpr) = 设备像素(分辨率)/设备独立像素(屏幕尺寸)

    03-25
    有用
    回复 1
    • 李忠
      李忠
      03-26
      这个我知道
      03-26
      回复
  • 李忠
    李忠
    03-25

    我觉得,这可能和css中设置的尺寸有关,只是猜测,没有找到文档。

    03-25
    有用
    回复
  • 武曲心
    武曲心
    03-25

    那你canvas.width和height别直接*dpr,直接赋值res[0].width,或者拿屏幕宽高做转换

    03-25
    有用
    回复 2
    • 李忠
      李忠
      03-25
      我想知道为什么会这样?也许我已经知道,但不知对否
      03-25
      回复
    • 武曲心
      武曲心
      03-25回复李忠
      canvas是用px值的,如果不是生成图片画布的大小就是渲染出来效果的大小,尺寸做做转换适应屏幕即可,如果像生成海报这种,为了图片质量其画布大小是要偏大的,所以在开发时会用scale查看效果,一般的情况不用放大再缩小。
      03-25
      回复
登录 后发表内容
问题标签