收藏
回答

画布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)

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


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

2 个回答

  • 太初
    太初
    02-07

    这样理解:

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

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

      您的浏览器不支持Canvas

    </canvas>

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

     

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

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


    02-07
    有用 1
    回复 2
    • shuang
      shuang
      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
      02-07
      回复
    • shuang
      shuang
      02-07
      感谢你的回答,我已经明白啥意思了
      02-07
      回复
  • 默
    02-07

    这算是个问题?

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

    02-07
    有用
    回复 3
    • shuang
      shuang
      02-07
      感谢你的回答,但是请把问题看清楚,在index.js里又给设置回去了,const width = 300,const height = 300,canvas.width = width * dpr, canvas.height = height * dpr
      02-07
      回复
    • 默
      02-07回复shuang
      是的呢 你是设置 但是呈现在页面的尺寸是在css里面的控制的  不是你在JS里面写个画布设置宽高就行了的
      02-07
      回复
    • shuang
      shuang
      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
      02-07
      回复
登录 后发表内容
问题标签