收藏
回答

微信开发者工具开发微信小程序,开发环境内模拟器没显示canvas中的绘制内容?

你好,微信小程序,开发环境内模拟器没显示canvas中的绘制内容,真机模拟有显示,如何修复呢?以前都没发生过,今天才出现,

  onReady() {
    this.createSelectorQuery()
      .select('#canvas'// 在 WXML 中填入的 id
      .fields({ node: true, size: true })
      .exec((res) => {
        // Canvas 对象
        this.data.canvas = res[0].node
        // Canvas 画布的实际绘制宽高
        const renderWidth = res[0].width
        const renderHeight = res[0].height
        // Canvas 绘制上下文
        this.data.ctx = this.data.canvas.getContext('2d')


        // 初始化画布大小
        const dpr = wx.getWindowInfo().pixelRatio
        this.data.canvas.width = renderWidth * dpr
        this.data.canvas.height = renderHeight * dpr
        this.data.ctx.scale(dpr, dpr)
        // 渲染上下文
        //this.data.ctx.fillStyle = '#ffffff'; // 设置白色背景
        //this.data.ctx.fillRect(0, 0, 300, 300); // 覆盖整个 Canvas


        this.data.ctx.font = "20px Arial";
        this.data.ctx.fillStyle = "#8B8B8C";


        this.data.ctx.textAlign = "center";
        this.data.ctx.textBaseline = "middle";
        this.data.ctx.fillText("双击可全屏", renderWidth/2, renderHeight/2);


      })
  },
回答关注问题邀请回答
收藏

1 个回答

  • 社区技术运营专员--Demons
    社区技术运营专员--Demons
    1天前

    小程序示例测试正常,你是否可以提供一下工具版本请具体描述问题出现的流程,并提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    1天前
    有用
    回复
登录 后发表内容