phonegap JavaScript canvas doesn't work
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"
<!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:
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
2 answers
solution1
2 2013-09-23 21:08:34
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");
solution2
1 2013-09-23 20:03:41
The html-canvas element should work fine with android. Try the "standard" browser from the android device (not chrome) and test the URL. Cordova uses this browserengine and not chrome.
If that works it is probabaly the app-initialization.
Don't use onLoad() in a caordova application. Before you do anything you have to wait for deviceready-event .
In your init() register for documenready and start your draw-timer within that event-handler.
Something different: Use requestAnimationFrame() it is better for mobile devices, because you wull only repaint within the default paint-loop. Also only paint if needed (maybe if currently touched), you will suck the battery empty, if you always repaint.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.