1

我找到了一个简单的 JavaScript 弹跳球动画，它适用于 chrome 浏览器（PC）当我运行它时，使用 Phonegap eclipse android 模拟器它编译但画布是空白的，并且显示以下消息“不幸的是系统 ui 已停止”

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
  <script type="text/javascript" charset="utf-8">

<script>
var context;
var x = 100;
var y = 100;
var radius = 20;
var dx = 5;
var dy = 5;

function init(){
    context = myCanvas.getContext('2d');

    //Set an interval for the canvas to be refreshed.
    // Basically call the draw function every 10 ms
    setInterval(draw, 10);
}

function draw(){
    //Clear the old circle before we draw the new one
    context.clearRect(0,0, myCanvas.width, myCanvas.height); //This erases the entire canvas

    context.beginPath();
    context.fillStyle = "#0000ff";

    //Draw a circle of radius 20 at the current coordinates on the canvas. 
    context.arc(x, y, radius, 0, Math.PI*2, true); 
    context.closePath();
    context.fill();

    //Check boundaries and negate if necessary
    if (x + radius <= 0 || x - radius <= 0 || x + radius >= myCanvas.width || x - radius >= myCanvas.width)
        dx = -dx;
    if (y + radius <= 0 || y - radius <= 0 || y + radius >= myCanvas.height || y - radius >= myCanvas.height)
        dy = -dy;

    //Increment dx,dy
    x+=dx;
    y+=dy;
}
</script>


<title>Ball Bouncing</title>

</head>
<body onLoad = "init();"> <!-- when the body is loaded, call the init() function -->
<canvas id = "myCanvas" width ="500" height = "400">
</canvas>
</body>
</html>

同样由于某种原因，如果我删除以下内容，它会起作用：

  <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
  <script type="text/javascript" charset="utf-8">

好的，所以我删除了

  <body onLoad = "init();">

并添加

   document.addEventListener("deviceready",init,false);

我得到以下logcat：

     09-23 21:53:30.886: E/Web Console(796): Uncaught SyntaxError: "Unexpected token < at   file:///android_asset/www/index.html:7" whats is wrong ?

请帮忙

4

2 回答 2

2

更新

<script type="text/javascript" charset="utf-8">

<script>
var context;

也许第二个脚本标签导致了问题？

缺少一行，例如：

myCanvas = document.getElementById("myCanvas");
于 2013-09-23T21:08:34.200 回答
1

html-canvas 元素应该可以在 android 上正常工作。从 android 设备（不是 chrome）尝试“标准”浏览器并测试 URL。Cordova 使用这个浏览器引擎而不是 chrome。

如果可行，则可能是应用程序初始化。

不要onLoad()在 caordova 应用程序中使用。在你做任何事情之前，你必须等待deviceready-event。

在您init()注册documenready并在该事件处理程序中启动您的绘图计时器。

不同之处：使用requestAnimationFrame()对移动设备更好，因为您只会在默认的绘制循环中重新绘制。也只在需要时涂漆（也许如果当前触摸），如果你总是重新涂漆，你会把电池吸空。

于 2013-09-23T20:03:41.707 回答