2015-06-13 17:06:25 -07:00
|
|
|
<!DOCTYPE HTML>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
|
|
|
<title>Canvas2Svg Playground</title>
|
|
|
|
|
<link rel="stylesheet" href="css/normalize.css">
|
|
|
|
|
<link rel="stylesheet" href="css/skeleton.css">
|
|
|
|
|
<link rel="stylesheet" href="css/playground.css">
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="container">
|
|
|
|
|
<form>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="twelve columns">
|
|
|
|
|
<h5>Select an example</h5>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
<form>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="twelve columns">
|
|
|
|
|
<!-- select content is generated by the command `gulp update_examples` -->
|
2015-11-27 12:58:41 +08:00
|
|
|
<select id="select" class="u-full-width"><option value="arc">arc</option><option value="arcTo">arcTo</option><option value="arcTo2">arcTo2</option><option value="emptyArc">emptyArc</option><option value="fillstyle">fillstyle</option><option value="globalalpha">globalalpha</option><option value="gradient">gradient</option><option value="linecap">linecap</option><option value="linewidth">linewidth</option><option value="setLineDash">setLineDash</option><option value="rgba">rgba</option><option value="saveandrestore">saveandrestore</option><option value="text">text</option><option value="tiger">tiger</option></select>
|
2015-06-13 17:06:25 -07:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="six columns">
|
|
|
|
|
<h5>Canvas</h5>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="six columns">
|
|
|
|
|
<h5>SVG</h5>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="six columns">
|
|
|
|
|
<canvas id="canvas" width="460" height="460"></canvas>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="six columns" id="svg">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<br>
|
|
|
|
|
<div class="row try">
|
|
|
|
|
<div class="twelve columns">
|
|
|
|
|
<h5>Or try your own!</h5>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="twelve columns">
|
|
|
|
|
<textarea id="textarea" class="u-full-width" placeholder="//ctx.fillRect(0,0,100,100);"></textarea>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="twelve columns">
|
|
|
|
|
<a href="#" class="button button-primary u-pull-right" id="render">Render</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- jQuery is only used for convenience on this test page, it's not a dependency for the library -->
|
|
|
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
|
|
|
|
|
<script type="text/javascript" src="../canvas2svg.js"></script>
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
window.C2S_EXAMPLES = {};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<!-- examples content is generated by the command `gulp update_examples` -->
|
2015-11-27 12:58:41 +08:00
|
|
|
<div id="examples"><script type="text/javascript" src="example/arc.js"></script><script type="text/javascript" src="example/arcTo.js"></script><script type="text/javascript" src="example/arcTo2.js"></script><script type="text/javascript" src="example/emptyArc.js"></script><script type="text/javascript" src="example/fillstyle.js"></script><script type="text/javascript" src="example/globalalpha.js"></script><script type="text/javascript" src="example/gradient.js"></script><script type="text/javascript" src="example/linecap.js"></script><script type="text/javascript" src="example/linewidth.js"></script><script type="text/javascript" src="example/setLineDash.js"></script><script type="text/javascript" src="example/rgba.js"></script><script type="text/javascript" src="example/saveandrestore.js"></script><script type="text/javascript" src="example/text.js"></script><script type="text/javascript" src="example/tiger.js"></script></div>
|
2015-06-13 17:06:25 -07:00
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
(function () {
|
|
|
|
|
"use strict";
|
|
|
|
|
|
|
|
|
|
function drawExample (example) {
|
|
|
|
|
var canvas = document.getElementById('canvas');
|
|
|
|
|
var ctx = canvas.getContext("2d");
|
|
|
|
|
ctx.clearRect(0, 0, 500, 500);
|
|
|
|
|
var c2s = new C2S(500, 500);
|
|
|
|
|
var svg = document.getElementById("svg");
|
|
|
|
|
|
|
|
|
|
if (svg.children.length > 0) {
|
|
|
|
|
svg.removeChild(svg.children[0]);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
example(ctx);
|
|
|
|
|
example(c2s);
|
|
|
|
|
|
|
|
|
|
svg.appendChild(c2s.getSvg());
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
$('#render').on('click', function(event) {
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
var text = $("#textarea").val();
|
|
|
|
|
var drawFunction = new Function("ctx", text);
|
|
|
|
|
drawExample(drawFunction);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
$('#select').on('change', function(event) {
|
|
|
|
|
var example = C2S_EXAMPLES[$(this).val()];
|
|
|
|
|
drawExample(example);
|
|
|
|
|
}).trigger('change');
|
|
|
|
|
|
|
|
|
|
}());
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
