parent
1e9f861430
commit
d37b9bb310
@ -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> |
Loading…
Reference in new issue