2015-07-13 12:52:13 -04:00
|
|
|
<!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">
|
2015-07-13 14:19:01 -04:00
|
|
|
var margin, s1, s2, s3, hook_separation, h1, h2, h3, h4, hook_overlap, hook_height, stroke_width, staple_rise, staple_offset, staple_width, hook_bite;
|
2015-07-13 12:52:13 -04:00
|
|
|
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() {
|
|
|
|
|
h1 = margin;
|
|
|
|
|
s1 = margin;
|
|
|
|
|
staple_rise = staple_offset;
|
2015-07-13 14:19:01 -04:00
|
|
|
staple_leg_height = staple_offset;
|
|
|
|
|
interior_margin = margin;
|
2015-07-13 12:52:13 -04:00
|
|
|
|
2015-07-13 14:19:01 -04:00
|
|
|
ctx.fillStyle = '#000'
|
|
|
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
|
|
style();
|
2015-07-13 12:52:13 -04:00
|
|
|
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();
|
|
|
|
|
}
|
|
|
|
|
|
2015-07-13 14:19:01 -04:00
|
|
|
function style() {
|
|
|
|
|
var foreground = 'white';
|
|
|
|
|
ctx.fillStyle = foreground;
|
|
|
|
|
ctx.strokeStyle = foreground;
|
2015-07-13 12:52:13 -04:00
|
|
|
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)
|
2015-07-13 14:19:01 -04:00
|
|
|
|
2015-07-13 12:52:13 -04:00
|
|
|
// 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);
|
2015-07-13 14:19:01 -04:00
|
|
|
p2.lineTo((canvas.width / 2) - staple_width - hook_bite, margin + hook_height);
|
2015-07-13 12:52:13 -04:00
|
|
|
ctx.stroke(p2);
|
2015-07-13 14:19:01 -04:00
|
|
|
|
2015-07-13 12:52:13 -04:00
|
|
|
// staple
|
|
|
|
|
var p3 = new Path2D();
|
2015-07-13 14:19:01 -04:00
|
|
|
p3.moveTo((canvas.width / 2) - hook_separation + hook_bite, margin + staple_leg_height);
|
|
|
|
|
p3.lineTo((canvas.width / 2) - staple_width, margin + staple_leg_height);
|
|
|
|
|
p3.lineTo((canvas.width / 2) - staple_width, margin + hook_height + staple_offset);
|
2015-07-13 12:52:13 -04:00
|
|
|
p3.lineTo((canvas.width / 2), margin + hook_height + staple_rise);
|
|
|
|
|
ctx.stroke(p3);
|
2015-07-13 14:19:01 -04:00
|
|
|
|
|
|
|
|
//interior
|
|
|
|
|
var big_rect_x1 = margin + s1 + interior_margin;
|
|
|
|
|
var big_rect_y1 = margin + interior_margin;
|
|
|
|
|
var big_rect_x2 = (canvas.width / 2) - staple_width - interior_margin;
|
|
|
|
|
var big_rect_y2 = (canvas.height / 2) + 1;
|
|
|
|
|
ctx.fillRect(big_rect_x1, big_rect_y1, big_rect_x2 - big_rect_x1, big_rect_y2 - big_rect_y1);
|
|
|
|
|
var small_rect_x1 = margin + s1 + interior_margin;
|
|
|
|
|
var small_rect_y1 = margin + hook_height + staple_rise + interior_margin;
|
|
|
|
|
var small_rect_x2 = (canvas.width / 2) + 1;
|
|
|
|
|
var small_rect_y2 = (canvas.height / 2) + 1;
|
|
|
|
|
ctx.fillRect(small_rect_x1, small_rect_y1, small_rect_x2 - small_rect_x1, small_rect_y2 - small_rect_y1);
|
2015-07-13 12:52:13 -04:00
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<style>
|
|
|
|
|
canvas {
|
|
|
|
|
width: 600px;
|
|
|
|
|
height: 250px;
|
|
|
|
|
border: 1px solid black;
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<canvas width="600" height="250"></canvas>
|
2015-07-13 14:19:01 -04:00
|
|
|
<p><label for="stroke_width">channel width: </label><input type="range" name="stroke_width" min="0" max="20" step="2" value="8" /></p>
|
2015-07-13 12:52:13 -04:00
|
|
|
<p><label for="margin">margin: </label><input type="range" name="margin" min="10" max="40" value="20"/></p>
|
2015-07-13 14:19:01 -04:00
|
|
|
<p><label for="hook_separation">hook separation: </label><input type="range" name="hook_separation" min="5" max="40" value="16"/></p>
|
|
|
|
|
<p><label for="hook_height">hooks height: </label><input type="range" name="hook_height" min="20" max="60" value="37"/></p>
|
|
|
|
|
<p><label for="staple_width">staple width: </label><input type="range" name="staple_width" min="0" max="70" value="50"/></p>
|
|
|
|
|
<p><label for="staple_offset">staple offset: </label><input type="range" name="staple_offset" min="5" max="60" value="17"/></p>
|
|
|
|
|
<p><label for="hook_bite">hook bite: </label><input type="range" name="hook_bite" min="-40" max="-5" value="-15"/></p>
|
2015-07-13 12:52:13 -04:00
|
|
|
</body>
|
|
|
|
|
</html>
|
