uni-app canvas标签在onLoad()函数里被操作时，ios将不会渲染canvas的画布，界面一片空白

uni-app canvas标签在onLoad()函数里被操作时，ios将不会渲染canvas的画布，界面一片空白

bug描述：

【报Bug】canvas标签在onLoad()函数里操作时ios的页面将不会渲染
在小程序端正常

操作步骤：

在onLoad()函数里对canvas标签进行操作

预期结果：

ios手机端正常渲染

实际结果：

ios手机端并未渲染canvas标签

示例代码：

<template>  
    <view>  
        <view>你好 这里是onLoad</view>  
        <view>  
        <canvas canvas-id="astrologyBase" style="height: 1000rpx;width: 1000rpx;"></canvas>  
        <canvas canvas-id="astrologyBase1" style="height: 1000rpx;width: 1000rpx;"></canvas>  
        <canvas canvas-id="astrologyBase2" style="height: 1000rpx;width: 1000rpx;" @click="clickStar"></canvas>  
        <view class="signReminder" :style="{display:displayReminder}">  
             <view class="reminderTitle flex-row-box">  
                 <view class="starNameRow" :style="{color:clickedStarColor}">{{clickedStarName}}</view>  
                 <view class="starMovementRow">{{clickedStarMovement}}落在</view>  
                 <view class="starSignRow" :style="{color:clickedStarSignColor}">{{clickedStarSign}}</view>  
                 <view class="starSignLonRow">{{clickedStarLon}}</view>  
             </view>  
             <view class="reminderAspects flex-row-box" v-for="(item,key) in clickedStarAspects">与  
                             <view class="toStarRow" :style="{color:calToStarColor(item.toStar)}">{{item.toStar}}</view>  
                             成  
                             <view class="aspectRow" :style="{color:calAspectColor(item.aspect)}">{{item.aspect}}º</view>  
                             <view class="movementRow">{{item.movement}}</view>  
                             <view class="sepRow">{{item.sep}}</view>  
             </view>  
        </view>  
        </view>  
    </view>  
</template>

更多关于uni-app canvas标签在onLoad()函数里被操作时，ios将不会渲染canvas的画布，界面一片空白的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

如果是on ready 则没问题。 急，求助，这个怎么解决呢？ 如果ios不支持的话，那这个项目无法继续下去了。

更多关于uni-app canvas标签在onLoad()函数里被操作时，ios将不会渲染canvas的画布，界面一片空白的实战教程也可以访问 https://www.itying.com/category-93-b0.html


onReady

在 uni-app 中使用 canvas 标签时，如果在 onLoad 函数中直接操作 canvas，在 iOS 设备上可能会出现画布无法渲染的问题，导致界面一片空白。这是因为 iOS 的渲染机制与 Android 不同，canvas 的渲染可能需要等待页面完全加载完成。

解决方案

  1. 使用 onReady 生命周期函数： onReady 生命周期函数会在页面初次渲染完成时触发，此时页面和 canvas 元素已经准备好，可以安全地进行操作。

    export default {
  onReady() {
    const ctx = uni.createCanvasContext('myCanvas');
    ctx.fillStyle = '#FF0000';
    ctx.fillRect(0, 0, 100, 100);
    ctx.draw();
  }
}

  2. 使用 setTimeout 延迟操作： 如果你仍然希望在 onLoad 中操作 canvas，可以使用 setTimeout 延迟执行，确保页面有足够的时间进行渲染。

    export default {
  onLoad() {
    setTimeout(() => {
      const ctx = uni.createCanvasContext('myCanvas');
      ctx.fillStyle = '#FF0000';
      ctx.fillRect(0, 0, 100, 100);
      ctx.draw();
    }, 100); // 延迟 100ms
  }
}

  3. 使用 nextTick： uni-app 提供了 nextTick 方法，可以在下一次 DOM 更新循环结束之后执行回调函数，确保 DOM 已经更新完毕。

    export default {
  onLoad() {
    this.$nextTick(() => {
      const ctx = uni.createCanvasContext('myCanvas');
      ctx.fillStyle = '#FF0000';
      ctx.fillRect(0, 0, 100, 100);
      ctx.draw();
    });
  }
}

  4. 确保 canvas 元素已经存在： 在操作 canvas 之前，确保 canvas 元素已经在 DOM 中存在。可以通过 uni.createSelectorQuery() 来查询 canvas 元素是否存在。

    export default {
  onLoad() {
    uni.createSelectorQuery().select('#myCanvas').boundingClientRect((rect) => {
      if (rect) {
        const ctx = uni.createCanvasContext('myCanvas');
        ctx.fillStyle = '#FF0000';
        ctx.fillRect(0, 0, 100, 100);
        ctx.draw();
      }
    }).exec();
  }
}
回到顶部