fabric.js/benchmarks/animation/index.html
2011-07-02 01:45:41 -04:00

59 lines
No EOL
2 KiB
HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Fabric.js benchmark</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<!--[if lt IE 9]>
<script type="text/javascript" src="../../lib/excanvas.js"></script>
<![endif]-->
<script src="../../dist/all.js" type="text/javascript"></script>
<style type="text/css" media="screen">
.canvas_container { position: relative; border: 1px solid #aaa; }
#complexity { font-weight: bold; }
#change-shape { display: inline-block; }
form { background: #ffe; border: 1px solid #fcc; padding: 0 10px; }
.canvas-container { border: 1px solid red; margin-top: 10px; }
</style>
<link rel="stylesheet" href="../../lib/master.css" type="text/css">
</head>
<body>
<ul id="header">
<li><a href="../index.html">Demos</a></li>
<li><a href="../index.html">Benchmarks</a></li>
<li><a href="../../docs/index.html">Docs</a></li>
<li><a href="../../test/unit/suite_runner.html">Tests</a></li>
</ul>
<h2>Fabric.js benchmark</h2>
<form>
<p>
Canvas complexity:
<span id="complexity"></span> paths
<span style="margin-left: 75px">
<span id="fps" style="font-weight: bold;"></span> FPS
</span>
</p>
<p>
Shape:
<input value="2.svg" id="shape-path">
<button>Change</button>
<span style="margin-left: 30px">
Shape size:
<input type="range" value="1" min="0.1" max="5" step="0.1" id="scale-object">
(<b id="scale-object-output">1</b>)
</span>
</p>
<p>
Canvas size:
<input type="range" value="600" min="100" max="1200" step="10" id="scale-canvas">
(<b id="scale-canvas-output">600</b>)
</p>
</form>
<canvas id="test" width="600" height="600"></canvas>
<script src="animation.js" type="text/javascript"></script>
</body>
</html>