44 lines
1.6 KiB
HTML
44 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>jQuery DrawBox Example</title>
|
|
<style>
|
|
html { font-family: "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif; background: #eee}
|
|
h1 { text-shadow: 1px 2px 5px #000; color: #fff }
|
|
canvas { background: #fff; border: 1px solid #999; -moz-border-radius: 10px; -webkit-border-radius: 10px }
|
|
a { color: #666; text-decoration: none }
|
|
a:hover { text-decoration: underline; color: #000 }
|
|
</style>
|
|
<!--[if IE]><script type="text/javascript" src="excanvas_r3/excanvas.compiled.js"></script><![endif]-->
|
|
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
|
|
<script type="text/javascript" src="jquery.drawbox.js"></script>
|
|
<script type="text/javascript">
|
|
$(document).ready(function()
|
|
{
|
|
$('#drawbox').drawbox({caption:'This is a caption',lineWidth:3,lineCap:'round',lineJoin:'round',colorSelector:true});
|
|
|
|
$('#view-output').click(function()
|
|
{
|
|
var svgOutput = window.open('data:image/svg+xml,' + $('#drawbox-data').val());
|
|
|
|
svgOutput.document.close();
|
|
|
|
return false;
|
|
});
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<h1>jQuery DrawBox Example</h1>
|
|
Click and drag your mouse or touch and move your finger in the box below
|
|
<br /><br />
|
|
<canvas id="drawbox" width="600" height="200">
|
|
<p>Your browser does not support <canvas></p>
|
|
</canvas>
|
|
<br />
|
|
<a href="#" id="view-output">View Rendered SVG Output</a>
|
|
<br /><br />
|
|
<a href="http://github.com/crowdsavings/drawbox">github.com</a> |
|
|
<a href="http://plugins.jquery.com/project/drawbox">plugins.jquery.com</a>
|
|
</body>
|
|
</html>
|