收藏
回答

画布canvas的长度(width)和高度(height)表示问题

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug 画布canvas 微信iOS客户端 8.0.2 2.14.4

首先用的代码是你们官方文档上自己写的

https://developers.weixin.qq.com/s/SHfgCmmq7UcM

画布的代码是这样index.wxml

index.js


执行出的效果是这样

问题

为什么我手动把index.wxml文件里的长度和高度设置删除后,直接写在index.js显示的效果会改变?如果这是bug,这问题也太初级了吧,不能好好测试下在上线吗

修改后的index.wxml


修改后的index.js(直接把width和height设置成300)

执行的效果就变这样了,变小了


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

4 个回答

  • 2FL0W3R
    2FL0W3R
    2022-02-18

    感谢!这个问题太有用了!我之前的代码一塌糊涂,bindtouchstart获取到的坐标是按css中的width和height算的,而canvas中的像素点又是另一套系统,把css中的坐标转换到canvas上的坐标需要把css的X坐标*canvas width/style width。

    比如wxml里写<canvas style="width:100px; height:100px">,而js中写canvas.width=200,canvas.height=200,在bindtouchstart里获取到的x,y为(15,20),那么想要在对应的位置画一个长*高的长方形就应该是fillrect(15*200/100,20*200/10,长,高)而不是fillrect(15,20,长,高)。

    2022-02-18
    有用 1
    回复
  • 哄哄
    哄哄
    2021-02-07

    这样理解:

    比如我们在生活中要挑选一块画布用来画画,当我们去市集上挑选画布的时候,发现画布的尺寸大小有各种各样的,但是我们的画板大小是500*500的,所以我们需要挑选一块500*500的画布,在这里我们需要使用第一种写法:

    <canvas id="canvas" width="500" height="500">

      您的浏览器不支持Canvas

    </canvas>

    来挑选正确的合乎画板尺寸的画布,因为这种写法正好是为了我们挑选画布的尺寸而设计的。

     

    买回来画布后,我们需要绘制更大更宽的画,所以我们把原来的画板尺寸增加了,但是我们又不想麻烦再跑市集一趟去挑选画布,这里假设我们之前买的画布是有弹性的,可以被拉伸并且可以正常使用。

    这种情况下就可以使用css中的width和height属性设置画布的宽和高(行内样式和内联样式)来拉伸画布的大小,但是这里需要注意一点的是:我们是在画布默认尺寸大小300*150的基础上面拉伸的。但是经过拉伸后的画布在绘制图画的时候会跟预想的结果不太一样。


    2021-02-07
    有用 1
    回复 4
    • shuang
      shuang
      2021-02-07
      感谢你的回答,但是这真的合理吗?那在js里设置 canvas.width = width * dpr和canvas.height = height * dpr有什么用?还有我在下面的标准html5里做相同的实验显示的效果是一样的
      https://www.w3school.com.cn/tiy/t.asp?f=html5_canvas_height_width
      2021-02-07
      回复
    • shuang
      shuang
      2021-02-07
      感谢你的回答,我已经明白啥意思了
      2021-02-07
      回复
    • 🥳
      🥳
      2022-04-17回复shuang
      啥意思 没明白
      2022-04-17
      回复
    • 权鑫
      权鑫
      2022-10-23回复🥳
      其实就是canvas画布默认有个宽高 300x150,原先写了宽高300x300了,然后等比例放大一个 dpr,变成了 200dpr x 200dpr;现在不写宽高,就是默认的300dpr x 150dpr 了;第二次渲染变小的原因可能是他用的某些分辨率下的调试工具,重要的是变扁了,这就是因为默认值
      2022-10-23
      回复
  • 🥳
    🥳
    2022-04-17

    为什么会少50像素呐

    2022-04-17
    有用
    回复 1
    • 陈琦
      陈琦
      2023-07-02
      这个什么软件
      2023-07-02
      回复
  • 默
    2021-02-07

    这算是个问题?

    你不给画布设定宽高 会执行默认的 高度直接缩小一半 为什么不会变形呢?

    2021-02-07
    有用
    回复 3
    • shuang
      shuang
      2021-02-07
      感谢你的回答,但是请把问题看清楚,在index.js里又给设置回去了,const width = 300,const height = 300,canvas.width = width * dpr, canvas.height = height * dpr
      2021-02-07
      回复
    • 默
      2021-02-07回复shuang
      是的呢 你是设置 但是呈现在页面的尺寸是在css里面的控制的  不是你在JS里面写个画布设置宽高就行了的
      2021-02-07
      回复
    • shuang
      shuang
      2021-02-07回复
      感谢你的回答,但是这真的合理吗?那在js里设置 canvas.width = width * dpr和canvas.height = height * dpr有什么用?还有我在下面的标准html5里做相同的实验显示的效果是一样的
      https://www.w3school.com.cn/tiy/t.asp?f=html5_canvas_height_width
      2021-02-07
      回复
登录 后发表内容
问题标签