diff --git a/index.html b/index.html index 11ed1a1..9933a8c 100644 --- a/index.html +++ b/index.html @@ -26,6 +26,9 @@ var _COLOR_GRASS = '#388E3C', _COLOR_HOLE = '#000000', _COLOR_BRACKET = '#000000' + + var _MAX_BRACKET = 100 + $(function(){ ctx = $('canvas')[0].getContext('2d') staticctx = $('canvas')[1].getContext('2d') @@ -40,7 +43,11 @@ var _COLOR_GRASS = '#388E3C', $(document).mousemove(function(e){ pX = e.pageX - $('canvas').offset().left pY = e.pageY - $('canvas').offset().top - }); + }) + + $(document).mousedown(function(e){ + // TODO: Add functionality + }) }) function animLoop() { @@ -78,9 +85,17 @@ var _COLOR_GRASS = '#388E3C', } function drawBracket() { + var x = pX, + y = pY + if(Math.hypot(pX - bX, pY - bY) > _MAX_BRACKET){ + angle = Math.atan2(pY - bY, pX - bX) + x = bX+_MAX_BRACKET*Math.cos(angle) + y = bY+_MAX_BRACKET*Math.sin(angle) + } + ctx.beginPath() ctx.moveTo(bX, bY) - ctx.lineTo(pX, pY) + ctx.lineTo(x, y) ctx.strokeStyle = _COLOR_BRACKET ctx.stroke() ctx.closePath()