Various cross-browser fixes.
Now working under Arora 0.5. But not Konqueror 4.2.2 (WebSockets never connects). IE support with excanvas still pending.
This commit is contained in:
Joel Martin
+46
-33
@@ -3,13 +3,16 @@
|
||||
<body>
|
||||
Iterations: <input id='iterations' style='width:50' value="100">
|
||||
|
||||
<input id='startButton' type='button' value='Start' style='width:100px'
|
||||
onclick="start();">
|
||||
Width: <input id='width' style='width:50' value="640">
|
||||
Height: <input id='height' style='width:50' value="480">
|
||||
|
||||
<input id='startButton' type='button' value='Do Performance Test'
|
||||
style='width:150px' onclick="begin();">
|
||||
|
||||
<br><br>
|
||||
|
||||
Canvas:<br>
|
||||
<canvas id="canvas" width="640" height="20"
|
||||
<b>Canvas</b> (should see three squares and two happy faces):<br>
|
||||
<canvas id="canvas" width="200" height="100"
|
||||
style="border-style: dotted; border-width: 1px;">
|
||||
Canvas not supported.
|
||||
</canvas>
|
||||
@@ -23,14 +26,12 @@
|
||||
<script type='text/javascript'
|
||||
src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
|
||||
-->
|
||||
|
||||
<script src="include/mootools.js"></script>
|
||||
<script src="include/util.js"></script>
|
||||
<script src="include/canvas.js"></script>
|
||||
|
||||
<script src="face.png.js"></script>
|
||||
<script>
|
||||
var msg_cnt = 0;
|
||||
var width = 800, height = 600;
|
||||
var start_width = 300, start_height = 100;
|
||||
var iterations;
|
||||
|
||||
function message(str) {
|
||||
@@ -40,35 +41,39 @@
|
||||
cell.scrollTop = cell.scrollHeight;
|
||||
}
|
||||
|
||||
function draw () {
|
||||
function test_functions () {
|
||||
var img, x, y;
|
||||
/* Border */
|
||||
Canvas.ctx.stroke();
|
||||
Canvas.ctx.rect(0, 0, Canvas.c_wx, Canvas.c_wy);
|
||||
Canvas.ctx.stroke();
|
||||
Canvas.fillRect(0, 0, Canvas.c_wx, Canvas.c_wy, [240,240,240]);
|
||||
|
||||
Canvas.blitStringImage("data:image/png;base64," + face64, 150, 40);
|
||||
|
||||
/*
|
||||
// Does not work in firefox
|
||||
var himg = new Image();
|
||||
himg.src = "head_ani2.gif"
|
||||
Canvas.ctx.drawImage(himg, 10, 10);
|
||||
*/
|
||||
himg.onload = function () {
|
||||
Canvas.ctx.drawImage(himg, 200, 10); };
|
||||
himg.src = "face.png";
|
||||
|
||||
/* Test array image data */
|
||||
//img = Canvas.ctx.createImageData(50, 50);
|
||||
img = Canvas.ctx.getImageData(0, 0, 50, 50);
|
||||
data = [];
|
||||
for (y=0; y< 50; y++) {
|
||||
for (x=0; x< 50; x++) {
|
||||
img.data[(y*50 + x)*4 + 0] = 255 - parseInt((255 / 50) * y, 10);
|
||||
img.data[(y*50 + x)*4 + 1] = parseInt((255 / 50) * y, 10);
|
||||
img.data[(y*50 + x)*4 + 2] = parseInt((255 / 50) * x, 10);
|
||||
img.data[(y*50 + x)*4 + 3] = 255;
|
||||
data[(y*50 + x)*4 + 0] = 255 - parseInt((255 / 50) * y, 10);
|
||||
data[(y*50 + x)*4 + 1] = parseInt((255 / 50) * y, 10);
|
||||
data[(y*50 + x)*4 + 2] = parseInt((255 / 50) * x, 10);
|
||||
data[(y*50 + x)*4 + 3] = 255;
|
||||
}
|
||||
}
|
||||
Canvas.ctx.putImageData(img, 100, 100);
|
||||
Canvas.blitImage(30, 10, 50, 50, data, 0);
|
||||
|
||||
//Canvas.prefer_js = false;
|
||||
img = Canvas.getTile(5,5,16,16,[0,128,128]);
|
||||
Canvas.putTile(img);
|
||||
|
||||
img = Canvas.getTile(90,15,16,16,[0,0,0]);
|
||||
Canvas.setSubTile(img, 0,0,16,16,[128,128,0]);
|
||||
Canvas.putTile(img);
|
||||
}
|
||||
|
||||
function start () {
|
||||
function begin () {
|
||||
$('startButton').value = "Running";
|
||||
$('startButton').disabled = true;
|
||||
setTimeout(start_delayed, 250);
|
||||
@@ -89,18 +94,26 @@
|
||||
message("prefer Canvas ops: " + time2 + "ms total, " +
|
||||
(time2 / iterations) + "ms per frame");
|
||||
|
||||
Canvas.resize(start_width, start_height, true);
|
||||
test_functions();
|
||||
$('startButton').disabled = false;
|
||||
$('startButton').value = "Start";
|
||||
}
|
||||
|
||||
function run_test () {
|
||||
var color, start_time = (new Date()).getTime();
|
||||
var width, height;
|
||||
width = $('width').value;
|
||||
height = $('height').value;
|
||||
Canvas.resize(width, height);
|
||||
var color, start_time = (new Date()).getTime(), w, h;
|
||||
for (var i=0; i < iterations; i++) {
|
||||
color = [128, 128, (255 / iterations) * i, 0];
|
||||
for (var x=0; x < width; x = x + 16) {
|
||||
for (var y=0; y < width; y = y + 16) {
|
||||
var tile = Canvas.getTile(x, y, 16, 16, color);
|
||||
Canvas.setTile(tile, 0, 0, 16, 16, color);
|
||||
for (var y=0; y < height; y = y + 16) {
|
||||
w = Math.min(16, width - x);
|
||||
h = Math.min(16, height - y);
|
||||
var tile = Canvas.getTile(x, y, w, h, color);
|
||||
Canvas.setSubTile(tile, 0, 0, w, h, color);
|
||||
Canvas.putTile(tile);
|
||||
}
|
||||
}
|
||||
@@ -110,11 +123,11 @@
|
||||
}
|
||||
|
||||
window.onload = function() {
|
||||
Canvas.init('canvas', width, height);
|
||||
Canvas.stop(); // Shut-off event interception
|
||||
$('iterations').value = 10;
|
||||
draw();
|
||||
Canvas.init('canvas');
|
||||
Canvas.resize(start_width, start_height, true);
|
||||
message("Canvas initialized");
|
||||
test_functions();
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
var face64 = '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';
|
||||
+4
-6
@@ -18,14 +18,11 @@
|
||||
<script type='text/javascript'
|
||||
src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
|
||||
-->
|
||||
|
||||
<script src="include/mootools.js"></script>
|
||||
<script src="include/util.js"></script>
|
||||
<script src="include/canvas.js"></script>
|
||||
|
||||
<script>
|
||||
var msg_cnt = 0;
|
||||
var width = 1280, height = 600;
|
||||
var width = 400, height = 200;
|
||||
var iterations;
|
||||
|
||||
function message(str) {
|
||||
@@ -54,8 +51,9 @@
|
||||
}
|
||||
|
||||
window.onload = function() {
|
||||
Canvas.init('canvas', width, height, true, keyPress,
|
||||
mouseButton, mouseMove);
|
||||
Canvas.init('canvas');
|
||||
Canvas.resize(width, height);
|
||||
Canvas.start(keyPress, mouseButton, mouseMove);
|
||||
message("Canvas initialized");
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user