Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>Canvas Performance Demo</title>
- </head>
- <body>
- <div>
- <h1>Canvas Performance Test</h1>
- <label for="num_boxes">Boxes:</label>
- <input type="text" id="num_boxes" value="1000"><br>
- <label for="test_time">Test Time (in milliseconds):</label>
- <input type="text" id="test_time" value="10000"><br>
- <button id="run_test">Run test</button>
- </div>
- <script type="text/javascript">
- var demo = {};
- demo.rand = function demo_rand (min, max) {
- return (Math.round(Math.random() * (max - min)) + min);
- };
- demo.makeBox = function demo_makeBox (width, height, color, speed) {
- var dir_x = (demo.rand(1, 2) === 1) ? -1: 1;
- var dir_y = (demo.rand(1, 2) === 1) ? -1: 1;
- return {
- x: 0,
- y: 0,
- width: width,
- height: height,
- color: color,
- speed: speed,
- direction: {
- x: dir_x,
- y: dir_y
- }
- };
- };
- demo.drawBox = function demo_drawBox (ctx, box) {
- ctx.save();
- ctx.fillStyle = box.color;
- ctx.fillRect(parseInt(box.x), parseInt(box.y), box.width, box.height);
- ctx.restore();
- };
- var view = {
- width: 640,
- height: 480
- };
- var canvas = document.createElement("canvas");
- canvas.width = view.width;
- canvas.height = view.height;
- document.body.appendChild(canvas);
- var ctx = canvas.getContext("2d");
- ctx.save();
- ctx.fillStyle = "rgb(0, 0, 0)";
- ctx.fillRect(0, 0, view.width, view.height);
- ctx.restore();
- demo.run = function (box_count, time) {
- ctx.save();
- ctx.fillStyle = "rgb(0, 0, 0)";
- ctx.fillRect(0, 0, view.width, view.height);
- ctx.restore();
- // Create some boxes
- var boxes = [];
- var num_boxes = box_count;
- for (var x = 0; x < num_boxes; x++) {
- var color = "rgb("
- + demo.rand(0, 255) + ", "
- + demo.rand(0, 255) + ", "
- + demo.rand(0, 255) + ")";
- var box = demo.makeBox(10, 10, color, demo.rand(50, 100));
- box.x = demo.rand(0, view.width - box.width);
- box.y = demo.rand(0, view.height - box.height);
- boxes.push(box);
- }
- var last_update = 0;
- var elapsed_log = [];
- var update = function update () {
- var now = new Date().getTime();
- elapsed = now - last_update;
- elapsed_log.push(elapsed);
- last_update = now;
- ctx.fillStyle = "rgb(0, 0, 0)";
- ctx.fillRect(0, 0, view.width, view.height);
- // Move boxes and check collision
- for (var x = 0; x < boxes.length; x++) {
- var b = boxes[x];
- var pixels = ((b.speed / 1000) * elapsed);
- b.x += (pixels * b.direction.x);
- b.y += (pixels * b.direction.y);
- if (b.x > (view.width - b.width)) {
- b.x = (view.width - b.width);
- b.direction.x = -1;
- }
- if (b.x < 0) {
- b.x = 0;
- b.direction.x = 1;
- }
- if (b.y > (view.height - b.height)) {
- b.y = (view.height - b.height);
- b.direction.y = -1;
- }
- if (b.y < 0) {
- b.y = 0;
- b.direction.y = 1;
- }
- demo.drawBox(ctx, b);
- }
- };
- last_update = new Date().getTime();
- var interval_id = window.setInterval(update, 0);
- window.setTimeout(function () {
- window.clearInterval(interval_id);
- var sum = 0;
- for (var x in elapsed_log) {
- sum += elapsed_log[x];
- }
- var avg = Math.round(sum / elapsed_log.length);
- ctx.save();
- ctx.fillStyle = "rgba(0,0,0,0.75)";
- ctx.fillRect(0, 0, view.width, 30);
- ctx.restore();
- ctx.save();
- ctx.fillStyle = "rgb(255, 255, 255)";
- ctx.font = "20px Courier";
- ctx.fillText("Test complete. Average FPS: " + Math.round(1000 / avg), 5, 20);
- ctx.restore();
- }, time);
- }
- var run_button = document.getElementById("run_test");
- run_button.addEventListener("click", function () {
- var num_boxes = document.getElementById("num_boxes").value;
- var test_time = document.getElementById("test_time").value;
- demo.run(num_boxes, test_time);
- }, true);
- </script>
- </body>
- </html>
Add Comment
Please, Sign In to add comment