收藏
回答

canvas 2d drawImage 向画布上绘制画布开发工具上是有效果的,真机预览没有

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug canvas 2d 微信安卓客户端 v8.0.1 2.16.0

开发工具上的效果:


代码:


 onReady: function () {
       




          const queryTwo = wx.createSelectorQuery()
          queryTwo.select('#myCanvasTwo')
            .fields({ nodetruesizetrue })
            .exec((res) => {
                console.log(res)
              const canvas = res[0].node
              var ctx = canvas.getContext('2d')
              console.log(ctx)
              const dpr = wx.getSystemInfoSync().pixelRatio
              canvas.width = res[0].width * dpr
              canvas.height = res[0].height * dpr
              ctx.scale(dpr, dpr)
              ctx.clearRect(0,0,canvas.width,canvas.height);
            
              ctx.font="20px Georgia";
              ctx.fillText("Hello World!",10,50);
              ctx.font="30px Verdana";
              // 创建一个渐变
              var gradient=ctx.createLinearGradient(0,0,canvas.width,0);
              gradient.addColorStop("0","magenta");
              gradient.addColorStop("0.5","blue");
              gradient.addColorStop("1.0","red");
              // 填充一个渐变
              ctx.fillStyle=gradient;
              ctx.fillText("Big smile!",10,90);
              // ctx.restore();
              ctx.save();
          



              const query = wx.createSelectorQuery()
              query.select('#myCanvas')
                .fields({ nodetruesizetrue })
                .exec((res) => {
                    console.log(res)
                  const canvas1 = res[0].node
                  const ctx1 = canvas1.getContext('2d')
                  console.log(ctx1)
                  const dpr = wx.getSystemInfoSync().pixelRatio
                  canvas1.width = res[0].width * dpr
                  canvas1.height = res[0].height * dpr
                  console.log(dpr)
                  console.log(ctx1)
                  console.log(canvas1.width)
                  console.log(canvas1.height)
                  console.log(ctx.canvas)
                  // ctx1.scale(dpr, dpr)
                
                  ctx1.drawImage(ctx.canvas,0,0)
                })
            })
    },


开发工具上日志:



############################################

真机预览效果:真机上的日志,canvas的对象的属性少了

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

1 个回答

  • 😶
    😶
    2021-03-19

    canvas 2d暂不支持真机,请使用预览模式

    2021-03-19
    有用
    回复 1
    • A@卫卫
      A@卫卫
      2021-03-19
      是预览模式,用手机预览的
      2021-03-19
      回复
登录 后发表内容
问题标签