phonegap JavaScript畫布不起作用

Question

我找到了一個簡單的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 ?

請幫忙

Answer 1

更新資料

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

<script>
var context;

也許第二個腳本標簽引起了問題？

缺少一行，例如：

myCanvas = document.getElementById("myCanvas");

Answer 2

html-canvas元素應該可以在android上正常工作。 從Android設備（不是chrome）嘗試“標准”瀏覽器並測試URL。 Cordova使用此瀏覽器引擎而非chrome。

如果可行，則可能是應用程序初始化。

不要在caordova應用程序中使用onLoad() 。 在執行任何操作之前，您必須等待deviceready-event 。

在您的init()注冊進行documenready ，然后在該事件處理程序中啟動繪圖計時器。

有所不同：使用requestAnimationFrame（）對移動設備更好，因為您只會在默認繪制循環內重新繪制。 此外，僅在需要時才進行塗裝（如果當前已觸摸過），如果您總是重新塗裝，則會將電池吸空。

phonegap JavaScript畫布不起作用

問題描述

2 個解決方案

解決方案1
2 2013-09-23 21:08:34

解決方案2
1 2013-09-23 20:03:41

phonegap JavaScript畫布不起作用

問題描述

2 個解決方案

解決方案1 2 2013-09-23 21:08:34

解決方案2 1 2013-09-23 20:03:41

解決方案1
2 2013-09-23 21:08:34

解決方案2
1 2013-09-23 20:03:41