shoofle/shooflenet
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add a scratch thing

Browse Source
This commit is contained in:
Shoofle Munroe 2015-07-13 12:52:13 -04:00
parent 1e9f861430
commit d37b9bb310
1 changed files with 89 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
static/strong_tag.html Normal file
View File

@ -0,0 +1,89 @@
<!doctype html>
<html>
<head>
<title>strong tag</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script type="text/javascript" src="jquery-2.0.3.js"></script>
<script type="text/javascript">
var margin, s1, s2, s3, hook_separation, h1, h2, h3, h4, hook_overlap, hook_height, stroke_width, staple_rise, staple_offset, staple_width;
var canvas, ctx;
var w = this;
$(document).ready(function() {
canvas = $('canvas')[0];
ctx = canvas.getContext("2d");
$('input').each(function() { w[$(this).attr('name')] = parseFloat($(this).val());});
$('input').on('change', function() { w[$(this).attr('name')] = parseFloat($(this).val()); redraw(); });
redraw();
});
function redraw() {
stroke();
h1 = margin;
s1 = margin;
hook_separation = margin / 2;
staple_rise = staple_offset;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
draw_on(ctx);
ctx.translate(0, canvas.height);
ctx.scale(1, -1);
draw_on(ctx);
ctx.translate(canvas.width, 0);
ctx.scale(-1, 1);
draw_on(ctx);
ctx.translate(0, canvas.height);
ctx.scale(1, -1);
draw_on(ctx);
ctx.restore();
}
function stroke() {
ctx.lineJoin = "miter";
ctx.lineCap = "square";
ctx.lineWidth = stroke_width;
}
function draw_on(context) {
// t
var p1 = new Path2D();
p1.moveTo(margin, margin);
p1.lineTo(margin, canvas.height / 2);
p1.lineTo(margin + s1, canvas.height / 2);
ctx.stroke(p1)
// arms
var p2 = new Path2D();
p2.moveTo(margin + s1, (canvas.height / 2) - h1);
p2.lineTo(margin + s1, margin);
p2.lineTo((canvas.width / 2) - hook_separation, margin);
p2.lineTo((canvas.width / 2) - hook_separation, margin + hook_height);
p2.lineTo((canvas.width / 2) - hook_separation - staple_width - hook_overlap, margin + hook_height);
ctx.stroke(p2);
// staple
var p3 = new Path2D();
p3.moveTo((canvas.width / 2) - hook_separation - staple_offset, margin + staple_offset);
p3.lineTo((canvas.width / 2) - hook_separation - staple_width - hook_overlap - staple_offset, margin + staple_offset);
p3.lineTo((canvas.width / 2) - hook_separation - staple_width - hook_overlap - staple_offset, margin + hook_height + staple_rise);
p3.lineTo((canvas.width / 2), margin + hook_height + staple_rise);
ctx.stroke(p3);
}
</script>
<style>
canvas {
width: 600px;
height: 250px;
border: 1px solid black;
display: block;
}
</style>
</head>
<body>
<canvas width="600" height="250"></canvas>
<p><label for="stroke_width">channel width: </label><input type="range" name="stroke_width" min="0" max="20" value="10" /></p>
<p><label for="margin">margin: </label><input type="range" name="margin" min="10" max="40" value="20"/></p>
<p><label for="hook_height">hooks height: </label><input type="range" name="hook_height" min="20" max="60" value="40"/></p>
<p><label for="staple_width">staple width: </label><input type="range" name="staple_width" min="0" max="50" value="25"/></p>
<p><label for="staple_offset">staple offset: </label><input type="range" name="staple_offset" value="20" min="5" max="60" value="17"/></p>
<p><label for="hook_overlap">hook overlap: </label><input type="range" id="hook_overlap" name="hook_overlap" min="0" max="20" value="5"/></p>
</body>
</html>