canvas 2d width大于1365px 就绘画不了
发布于 6 年前 作者 guiyingguo 13695 次浏览 来自 官方Issues

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

<text>canvas 2d width大于1365 就绘画不了 </text>
<text>width: 1365px</text>
<canvas type="2d" id="canvas" class="canvas"  style="width: 1365px; height: 200px; border: 2rpx solid greenyellow;" ></canvas>

<text>width: 1366px 不支持</text>
<canvas type="2d" id="canvasTwo" class="canvas"  style="width: 1366px; height: 200px; border: 2rpx solid blue;" ></canvas>

  onReadyfunction () {
       

    const queryTwo = wx.createSelectorQuery()
    queryTwo.select('#canvas')
      .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.fillText("Big smile!",10,120);
        ctx.fillText("Big smile!",160,90);
        // ctx.restore();
        ctx.save();
    

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

            ctx1.fillText("Big smile!",10,90);
            ctx1.fillText("Big smile!",10,120);
            ctx1.fillText("Big smile!",160,90);
          })
      })
},

2 回复

是的 1400是临界点,我猜这样可以避免小程序闪退,因为canvas真的很占用资源

但小程序 不可能用大部分微信的内存。。。剩下。。。你懂 的

移动端不可能有这么大的屏幕

回到顶部