phonegap JavaScript画布不起作用

Question

I've found a simple JavaScript bouncing ball animation, it works on chrome browser (PC) When I run it, using Phonegap eclipse android emulator it compiles but canvas is blank and the following message displayed "unfortunately system ui has stopped" 我找到了一个简单的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>

Also for some reason it works if i remove the following: 同样由于某种原因，如果我删除以下内容，它也可以工作：

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

ok so i removed 好的，所以我删除了

  <body onLoad = "init();">

and added 并添加

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

and i get the following logcat: 我得到以下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 ?

please help 请帮忙

Answer 1

Update 更新资料

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

<script>
var context;

Maybe the second script-tag is causing the problem? 也许第二个脚本标签引起了问题？

There is a line missing like: 缺少一行，例如：

myCanvas = document.getElementById("myCanvas");

Answer 2

The html-canvas element should work fine with android. html-canvas元素应该可以在android上正常工作。 Try the "standard" browser from the android device (not chrome) and test the URL. 从Android设备（不是chrome）尝试“标准”浏览器并测试URL。 Cordova uses this browserengine and not chrome. Cordova使用此浏览器引擎而非chrome。

If that works it is probabaly the app-initialization. 如果可行，则可能是应用程序初始化。

Don't use onLoad() in a caordova application. 不要在caordova应用程序中使用onLoad() 。 Before you do anything you have to wait for deviceready-event . 在执行任何操作之前，您必须等待deviceready-event 。

In your init() register for documenready and start your draw-timer within that event-handler. 在您的init()注册进行documenready ，然后在该事件处理程序中启动绘图计时器。

Something different: Use requestAnimationFrame() it is better for mobile devices, because you wull only repaint within the default paint-loop. 有所不同：使用requestAnimationFrame（）对移动设备更好，因为您只会在默认绘制循环内重新绘制。 Also only paint if needed (maybe if currently touched), you will suck the battery empty, if you always repaint. 此外，仅在需要时才进行涂装（如果当前已触摸过），如果您总是重新涂装，则会将电池吸空。

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