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

Add a scratch thing

Browse Source
main
Shoofle Munroe 9 years ago
parent 1e9f861430
commit d37b9bb310
1 changed files with 89 additions and 0 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 89
      static/strong_tag.html

89
static/strong_tag.html
Unescape 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>
Write Preview
Loading…
Cancel
Save