diff options
Diffstat (limited to 'rectangles-draw.html')
| -rw-r--r-- | rectangles-draw.html | 95 |
1 files changed, 0 insertions, 95 deletions
diff --git a/rectangles-draw.html b/rectangles-draw.html deleted file mode 100644 index c79b700..0000000 --- a/rectangles-draw.html +++ /dev/null @@ -1,95 +0,0 @@ -<!doctype html> -<html> -<head> - <link rel="stylesheet" type="text/css" href="assets/stylesheets/css.css"> -<style type="text/css"> -</style> -</head> -<body> - - -</body> -<script type="text/javascript"> - -(function(){ - - var canvas = document.createElement("canvas") - var ctx = canvas.getContext("2d") - var w = canvas.width = 500 - var h = canvas.height = 500 - document.body.appendChild(canvas) - - var rects = [] - var dragging = false - var mouse = {x:0,y:0,w:0,h:0} - canvas.addEventListener("mousedown", function(e){ - dragging = true - mouse.x = e.pageX - mouse.y = e.pageY - mouse.w = mouse.h = 0 - }) - canvas.addEventListener("mousemove", function(e){ - if (dragging) { - mouse.w = e.pageX - mouse.x - mouse.h = e.pageY - mouse.y - } - else { - mouse.x = e.pageX - mouse.y = e.pageY - } - }) - document.addEventListener("mouseup", function(e){ - if (! dragging) return - dragging = false - rects.push(normalize(mouse)) - mouse = {x:e.pageX,y:e.pageY,w:0,h:0} - }) - - function animate(){ - requestAnimationFrame(animate) - ctx.fillStyle = "#fff" - ctx.fillRect(0,0,w,h) - - solve_rects() - draw_rects() - draw_mouse() - } - animate() - - function normalize(rect){ - if (rect.w < 0) { - rect.x += rect.w - rect.w = abs(rect.w) - } - if (rect.h < 0) { - rect.y += rect.h - rect.h = abs(rect.h) - } - return rect - } - function solve_rects(){ - } - function draw_rects(){ - for (var i = 0; i < rects.length; i++) { - var rect = rects[i] - ctx.fillStyle = "rgba(0,200,220,0.5)" - ctx.fillRect(rect.x, rect.y, rect.w, rect.h) - } - } - function draw_mouse(){ - if (mouse.w == 0 && mouse.h == 0) { - ctx.fillStyle = "rgba(255,0,0,0.4)"; - ctx.beginPath(); - ctx.arc(mouse.x, mouse.y, 5, 0, 2*Math.PI, false); - ctx.fill(); - } - else { - ctx.fillStyle = "rgba(255,255,0,0.5)" - ctx.fillRect(mouse.x, mouse.y, mouse.w, mouse.h) - } - } - -})() - -</script> -</html> |
