summaryrefslogtreecommitdiff
path: root/rectangles-draw.html
diff options
context:
space:
mode:
Diffstat (limited to 'rectangles-draw.html')
-rw-r--r--rectangles-draw.html95
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>