canvas 2d drawImage 向画布上绘制画布开发工具上是有效果的,真机预览没有
发布于 5 年前 作者 mingguo 4021 次浏览 来自 官方Issues

开发工具上的效果:

代码:

 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 回复

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

回到顶部