Android WebView HTML5畫布錯誤

我有一個Android應用程序，它使用WebView來使用HTML加載GUI。有一個<畫布>元素，我使用Chart.js Javascript庫繪製圖表來繪製圖表。它在3個設備上進行了測試。在其中兩個上它工作得很好（Android 2.2和2.6），但是在後來的android（4.1.2）版本中，畫布使其成倍增加：所有圖表在畫布中都可見兩次，其中一個圖片稍微向上移動和左邊。Android WebView HTML5畫布錯誤

canvas with double chart

什麼是與畫布的問題？爲什麼它會呈現的東西加倍？我怎樣才能讓它只渲染一次？

下面的代碼：

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是<選擇與我們選擇圖表， JI.getGraphData回報>元素Chart.js的JSON數據。

來源

2013-10-03 Jaka

嘗試通過樣式標記將圖表位置固定到工作的畫布html代碼 – 2013-10-03 19:59:54

中。它搞砸了其他一些東西，但圖表起作用。謝謝！ – Jaka

現在出現了一個新問題，我把它發佈到http://stackoverflow.com/questions/19847582/chart-js-canvas-resize – Jaka

如果您不希望由「position：fixed;」造成的問題on元素， canvas父元素不應該具有值「hidden」的css屬性「溢出」。

因此，定義像「溢出：可見」的東西。在父元素上。

來源

2014-01-11 21:56:26

其實我通過在畫布的父元素中設置overflow：hidden;來解決類似的問題。 – swen

刪除溢出：隱藏;解決了我的問題。謝謝！ –

試試這個：

// 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); 

}

來源

2014-01-30 10:13:58

我也遇到了這個問題。我通過使用position:relative , left and -webkit-transform instead margin;解決了這個問題。這個問題被意外解決了。

來源

2016-04-11 07:13:36 warlock

Android WebView HTML5畫布錯誤

回答

相關問題