Question

我在我的Android应用中使用了Webview。我将2d画布放在webgl画布上（webgl在这里注释掉）。现在，当我启动应用程序时，有一半时间它会绘制预期路径，而有一半时间它没有绘制任何内容。我错过了什么吗？这可能是一个缓存问题吗？

<!DOCTYPE html>
<html lang="en">
<head>
<title>Cardboard container</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
  body {
    margin: 0px;
    overflow: hidden;
    /*background-color: black;*/
  }
  #container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: none;
  }
  #stamp {
  position: absolute;
  top: 0px;
  left: 160px;
  width: 38px;
  height: 38px;
  background-color: red;
  z-index: 0;
  }
  #bezier{
    z-index: 2;
  }
</style>
</head>
<body>
<div id="container"></div>
<div id="stamp"></div>
<canvas id="bezier">Error creating bezier canvas</canvas>

<script src="js/third-party/threejs/three.js"></script>
<script src="js/third-party/threejs/StereoEffect.js"></script>
<script src="js/webgl.js"></script>
<script src="js/bezier.js"></script>

<script>

var consecutiveAbsentFrames = 6;
var totalFrames = 90;
var frameCount = 0;
var straightLineSpeed = 0.05;
var scaleFactor = 0.9;

var numGridPoints = 196; 
var fovRadius = 9;
var fovXoffset = 0.5;
var gridPoints = []; // Points are an array [x0,y0,x1,y1,...]
var gridPoints2d = [];
var completePath = []; 
var pathIndex = 0;

init();

function init() {

  stamp = document.getElementById('stamp');

  init2d();
}


function init2d(){
  var b = document.getElementById('bezier');
  b.width = window.innerWidth * scaleFactor * 0.5;
  b.height = window.innerHeight;
  var ctx=b.getContext('2d');

  ctx.moveTo(0,0);
  ctx.lineTo(100,100);
  ctx.stroke();
}

</script>
</body>
</html>

修改使用Android 5.1的Moto X上的行为是正常的，在带有5.1.1的注释5上是不正确的

Webview中的Canvas元素仅在某些时候被绘制

0 个答案: