mirror of
https://github.com/Hopiu/fabric.js.git
synced 2026-05-01 10:34:42 +00:00
52 lines
No EOL
2 KiB
HTML
52 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>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
|
|
<title>Canvas demo</title>
|
|
|
|
<!--[if lt IE 9]>
|
|
<script src="js/core/excanvas.js" type="text/javascript"></script>
|
|
<![endif]-->
|
|
|
|
<script src="../../dist/all.min.js" type="text/javascript"></script>
|
|
|
|
<style type="text/css">
|
|
.canvas_container { margin: 0 auto; position: relative; float: left; border: 1px solid #aaa; }
|
|
#commands { float: left; margin-left: 20px; list-style: none; }
|
|
.clear { color: red; font-weight: bold; margin-top: 1em; }
|
|
#canvas-console { display: block; }
|
|
#rasterize { margin-top: 10px; color: green; }
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
<canvas id="canvas" width="800" height="600"></canvas>
|
|
|
|
<ul id="commands">
|
|
<li style="font-weight:bold;margin-bottom:1em">Add objects to canvas:</li>
|
|
|
|
<li><button class="rect">Rectangle</button></li>
|
|
<li><button class="circle">Circle</button></li>
|
|
<li><button class="triangle">Triangle</button></li>
|
|
<li><button class="image1">Image 1</button></li>
|
|
<li><button class="image2">Image 2</button></li>
|
|
<li><button class="shape" id="shape1">SVG shape 1</button></li>
|
|
<li><button class="shape" id="shape2">SVG shape 2</button></li>
|
|
<li><button class="shape" id="shape3">SVG shape 3</button></li>
|
|
<li><button class="shape" id="shape4">SVG shape 4</button></li>
|
|
|
|
<li><button id="rasterize">Rasterize canvas to image</button></li>
|
|
|
|
<li><button class="clear">Clear canvas</button></li>
|
|
<li style="margin-top:20px;">
|
|
<label for="canvas-console">Execute code:</label>
|
|
<textarea rows="8" cols="40" id="canvas-console">canvas.clear(); // clears canvas</textarea>
|
|
<button type="button" id="execute">Execute</button>
|
|
</li>
|
|
</ul>
|
|
|
|
<script src="demo.js" type="text/javascript"></script>
|
|
</body>
|
|
</html> |