收藏
回答

canvas 2d width大于1365px 就绘画不了

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

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 个回答

  • 游戏人生
    游戏人生
    2021-04-23

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

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

    2021-04-23
    有用
    回复
  • this
    this
    2021-04-23

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

    2021-04-23
    有用
    回复 1
    • ElPsyCongroo
      ElPsyCongroo
      2022-08-03
      1365像素很大吗?
      2022-08-03
      回复
登录 后发表内容