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画布错误

回答

相关问题