uni-app canvas在Android 9 webview chrome/66.0.3359.158 不显示，是不支持

uni-app canvas在Android 9 webview chrome/66.0.3359.158 不显示，是不支持

17 回复

测试过其它安卓版本吗？另外使用的hbuilderx版本是多少？

更多关于uni-app canvas在Android 9 webview chrome/66.0.3359.158 不显示，是不支持的实战教程也可以访问 https://www.itying.com/category-93-b0.html


hbuilderx : 4.57 安卓10 chrome/91.0.4472.114测试了没问题，主要还是因为webview的浏览器内核版本太低了？

canvas dom上的touchmove事件是生效的，就会没绘制出内容

麻烦看下下面的demo

下图绘制一个矩形，在Android 9上无法显示，draw()的回调执行了

你发一下文本，我看一下

<script setup> import { onMounted } from 'vue'

const canvasId = ref(‘testCanvas’) onMounted(() => { const ctx = uni.createCanvasContext(canvasId.value) console.warn(’====ctx====’, ctx) ctx.setFillStyle(’#00f’) ctx.fillRect(0, 0, 200, 200)

ctx.draw(false, () => { console.warn(’===draw完成===’) }) })

function onError(e) { console.warn(’====onError====’, e) } </script>

<style scoped lang="scss">
</style>

回复 DCloud_UNI_yuhe: 发你了，麻烦看下，我发现第二次进入canvas的页面，蓝色矩形绘制出来了，好奇怪，我延迟cxt.draw()，第一次进入页面仍然不显示蓝色矩形

回复 DCloud_UNI_yuhe: 绘制的效果截图我发在下面了

回复 DCloud_UNI_yuhe: 你好，请问有大概的解决思路了？

下面两张图，没显示蓝色矩形的是第一次打开这个页面的效果，第二次进入这个页面，就能正常显示蓝色矩形了。
我把App进程杀掉，重新打开App，再次打开页面又不显示蓝色矩形了，第二次打开又显示了


在Android 9 WebView（Chrome/66.0.3359.158）中，uni-app的Canvas组件不显示通常与WebView内核版本兼容性有关。Chrome 66发布于2018年，对HTML5 Canvas的支持可能存在限制或bug。

可能原因及解决方案：

  1. WebView内核兼容性问题
    Chrome 66对Canvas 2D上下文的部分API支持不完善，可能导致uni-app底层渲染引擎无法正常工作。建议测试以下方向：

    • 检查Canvas API使用情况，避免使用toDataURL()等兼容性较差的方法
    • 尝试降级渲染模式：在pages.json中配置"style": {"renderingMode": "seperated"}

  2. 硬件加速冲突
    旧版WebView的硬件加速机制可能与Canvas绘制冲突：

    // 在页面onLoad中尝试禁用硬件加速
plus.webview.currentWebview().setStyle({ hardwareAccelerated: false })

  3. Polyfill方案
    可通过条件编译引入Canvas兼容库：

    <!-- 安卓9专属处理 -->
<!-- #ifdef APP-PLUS -->
<script src="https://cdn.jsdelivr.net/npm/polyfill.io@3/dist/polyfill.min.js"></script>
<!-- #endif -->

  4. 渲染时机问题
    在旧版WebView中需要确保Canvas在页面渲染完成后操作：

    onReady() {
  this.$nextTick(() => {
    // Canvas操作代码
  })
}
回到顶部