android - Android WebView HTML5 画布错误

Question

我有一个 Android 应用程序，它使用 WebView 来使用 HTML 加载 GUI。有一个 <canvas> 元素，我使用 Chart.js Javascript 库在其中绘制图表以绘制图表。它在 3 台设备上进行了测试。在其中两个上它工作正常（Android 2.2 和 2.6），但在更高版本的 android（4.1.2）上，画布使它加倍：所有图表在画布中可见两次，其中一个向上移动了一点和左边。

画布有什么问题？为什么它会使渲染的东西加倍？我怎样才能让它只渲染一次？

这是代码：

HTML：

<canvas id="graph_canvas"></canvas>

JavaScript：

var canvas=document.getElementById("graph_canvas");
canvas.height=200;
canvas.width=200;
var graphSelection=document.getElementById("graphSelection");
var ctx = canvas.getContext("2d");
var data_=JSON.parse(JI.getGraphData(graphSelection.value));    
var myNewChart = new Chart(ctx).Line(data_);

其中 graphSelection 是我们选择图表的 <select> 元素，JI.getGraphData 返回 Chart.js 的 JSON 数据。

Answer 1

如果您不希望由“位置：固定；”引起的问题 在元素上，画布父元素不应具有值为“隐藏”的 css 属性“溢出”。

所以定义类似“溢出：可见；” 在父元素上。

Answer 2

尝试这个：

// If Samsung android browser is detected
if (window.navigator && window.navigator.userAgent.indexOf('534.30') > 0) {

    // Tweak the canvas opacity, causing it to redraw
    $('canvas').css('opacity', '0.99');

    // Set the canvas opacity back to normal after 5ms
    setTimeout(function() {
        $('canvas').css('opacity', '1');
    }, 5);

}

Answer 3

我也遇到了这个问题。我通过使用解决了它position:relative , left and -webkit-transform instead margin;。问题被意外解决了。