收藏
回答

canvas 使用ctx.drawImage无响应?



和官网一样的配置。点击无反应,怎么肥事?



----------------------------------------------------------------分割线----------------------------------------------------------------

type="2d" 后来发现添加type就不会显示图片

但是没有这个2d又不可以使用wx.createSelectorQuery()设置高度、宽度,怎么破?


最后一次编辑于  2019-12-16
回答关注问题邀请回答
收藏

4 个回答

  • Fixd.quan
    Fixd.quan
    2019-12-16

    去掉type属性试一下,属性冲突了


    补充:宽高设置




    2019-12-16
    有用 1
    回复 5
    • Re 0
      Re 0
      2019-12-16
      确实是这样,但是type去掉无法通过wx.createSelectorQuery()获取DOM设置高度了,奇怪,小程序的canvas居然不可以直接在标签上设置高度、宽度。css不是会拉伸吗?
      2019-12-16
      回复
    • Re 0
      Re 0
      2019-12-16
      啊? css的高度不会被拉伸吗? 当初记得HTML的canvas css高度会拉伸原有高度
      2019-12-16
      回复
    • Fixd.quan
      Fixd.quan
      2019-12-16回复Re 0
      小程序刚接触,wx.createSelectorQuery()没有使用过;canvas使用的是px单位,我这边都是js中按比例计算好(px单位的)宽高后,更新canvas宽高,然后再进行绘制内容
      2019-12-16
      回复
    • Fixd.quan
      Fixd.quan
      2019-12-16回复Re 0
      我一个后端,凑什么热闹0.0
      2019-12-16
      回复
    • Re 0
      Re 0
      2019-12-17回复Fixd.quan
      木有木有,闻道有先后。小程序的canvas确实麻烦,没有H5的好用,好多条条框框
      2019-12-17
      回复
  • phoenixor
    phoenixor
    03-05

    我比你还惨,用同样的示例,报这个 错,canvas 2d上没有drawImage方法?????

    /** 画圆形头像 */
      drawCircleAvatar(sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) {
        this.ctx.arc(this.toPx(sx), this.toPx(sy), this.toPx(sWidth / 2), 02 * Math.PI);
        this.ctx.clip();
        const _this = this;
        wx.chooseImage({
          success: function(res) {
            console.log('图片地址-->>', res.tempFilePaths[0]);
            _this.ctx.drawImage(
              res.tempFilePaths[0],
              _this.toPx(sx),
              _this.toPx(sy),
              _this.toPx(sWidth),
              _this.toPx(sHeight),
              _this.toPx(dx),
              _this.toPx(dy),
              _this.toPx(dWidth),
              _this.toPx(dHeight)
            );
            _this.ctx.draw();
          },
        });
      },
    


    03-05
    有用
    回复 2
    • phoenixor
      phoenixor
      03-05
      我知道了,2D画布的drawImage的第一个参数类型变了,文档竟然不说,坑死人啊,要通过canvas.createImage()返回值传入第一个参数
      03-05
      回复
    • Re 0
      Re 0
      03-06回复phoenixor
      奇怪的知识点又增加了
      03-06
      回复
  • 范
    2019-12-16

    canvas是可以在style中设置高宽的,但是不支持自动拉伸,如果需要根据图片的大小自适应,需要把宽高设置成变量,然后根据获取的图片高宽,重新设置高宽

    你提到的通过wx.createSelectorQuery()获取dom高度,不知道这步是打算做什么?

    2019-12-16
    有用
    回复 1
    • Re 0
      Re 0
      2019-12-17
      但是,真实情况和楼下说的相似,加type="2d"不响应,不加type="2d" ,wx.createSelectorQuery()又获取不到canvas的属性就不能进行设置,但是画图的时候增,搞得头懵,还好只要增加图片,要是文字和图片同时需要,就头大了,现在躲过一劫是一劫
      2019-12-17
      回复
  • 正周
    正周
    2019-12-16

    打印一下,你的图片有没获取成功

    2019-12-16
    有用
    回复 6
    • Re 0
      Re 0
      2019-12-16
      获取成功了,但是未响应
      2019-12-16
      回复
    • Conway
      Conway
      01-03回复Re 0
      我也遇到同样的问题 楼主解决了么
      01-03
      回复
    • Re 0
      Re 0
      01-03回复Conway
      删了type="2d" 试试
      01-03
      回复
    • Conway
      Conway
      01-03回复Re 0
      我一直都没加过 type="2d" 😂
      01-03
      回复
    • Conway
      Conway
      01-03回复Re 0
      我记得之前就没出现过这种情况  按照之前我都写法现在图片就不显示了
      01-03
      回复
    查看更多(1)
登录 后发表内容
问题标签