uni-app 在ios的webview打开含有canvas的外部网页时 canvas样式会错乱

示例代码：

<template>  
  <div style="background-color: aqua;">  
    <h1>canvas</h1>  
    <canvas ref="myCanvas" width="1000" height="800" z-index="1"/>
  </div>  
</template>  

<script>  
export default {  
  mounted() {  
    const canvas = this.$refs.myCanvas  
    const ctx = canvas.getContext('2d')  
    ctx.fillStyle = 'blue'  
    ctx.fillRect(100, 200, 200, 200)  
    ctx.font = '30px Arial'  
    ctx.fillStyle = 'white'  
    ctx.fillText('Hello, world!', 120, 300)  
    ctx.fillStyle = 'red'  
    ctx.fillRect(200, 500, 100, 100)  
  }  
}  
</script>

操作步骤：

在ios系统使用webview打开含有canvas的外部网页

预期结果：

ios系统在webview中看到的canvas效果应该与实际样式相符

实际结果：

ios系统在webview中看到的canvas样式错乱

bug描述：

在ios端，使用webview打开含有canvas的外部网页，此时canvas的样式会出现问题，把网页用手机的safari浏览器打开是正常的，在安卓手机用webview打开也正常。

gougou168 1楼•10 天前

解决了么如何解决的

itying888 2楼•10 天前

在 uni-app 中，当在 iOS 的 WebView 中打开含有 canvas 的外部网页时，canvas 样式可能会错乱，这通常是由于 iOS 的 WebView 在处理 canvas 元素时的一些限制或兼容性问题所导致的。以下是一些可能的原因和解决方案：

1. Canvas 尺寸问题

问题描述: iOS 的 WebView 在处理 canvas 时，如果 canvas 的尺寸设置不当，可能会导致样式错乱。

解决方案: 确保在设置 canvas 的宽高时使用 width 和 height 属性，而不是通过 CSS 来设置。例如：

const canvas = document.getElementById('myCanvas');
canvas.width = 300;  // 使用 width 属性
canvas.height = 150; // 使用 height 属性

2. CSS 缩放问题

问题描述: 如果页面中的 canvas 元素被 CSS 缩放，可能会导致渲染错乱。
解决方案: 避免对 canvas 元素使用 CSS 缩放，或者通过调整 canvas 的 width 和 height 属性来达到相同的效果。

3. Retina 屏幕问题

问题描述: 在 Retina 屏幕（高分辨率屏幕）上，canvas 可能会因为像素比（devicePixelRatio）而出现模糊或错乱。

解决方案: 根据 devicePixelRatio 调整 canvas 的尺寸和绘制内容。例如：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const dpr = window.devicePixelRatio || 1;
canvas.width = 300 * dpr;
canvas.height = 150 * dpr;
ctx.scale(dpr, dpr);