Draw

From a217ba8ae93591c5f1881425e9a3f2d6842e92de Mon Sep 17 00:00:00 2001 From: Mitja Felicijan Date: Wed, 19 Sep 2018 01:53:20 +0200 Subject: content update --- draw/app.css | 58 -------------------------------------------------- draw/app.js | 66 --------------------------------------------------------- draw/index.html | 38 --------------------------------- 3 files changed, 162 deletions(-) delete mode 100644 draw/app.css delete mode 100644 draw/app.js delete mode 100644 draw/index.html (limited to 'draw') diff --git a/draw/app.css b/draw/app.css deleted file mode 100644 index 40e4838..0000000 --- a/draw/app.css +++ /dev/null @@ -1,58 +0,0 @@ -@charset "utf-8"; - -* { - box-sizing: border-box; - background-color: transparent; - margin: 0; - padding: 0; - border: 0; - list-style-type: none; - outline: none; - text-decoration: none; - position: relative; - box-shadow: none; - -moz-osx-font-smoothing: grayscale !important; - text-rendering: optimizeLegibility !important; - -webkit-font-smoothing: antialiased !important; - font-family: Arial, Helvetica, sans-serif; -} - -body { - margin: 0; - padding: 0; - font-size: 13px; -} - -section { - position: fixed; - left: 0; - top: 0; - right: 0; - bottom: 0; - background-image: linear-gradient(0deg, transparent 24%, rgba(0, 0, 0, .08) 25%, rgba(0, 0, 0, .08) 26%, transparent 27%, transparent 74%, rgba(0, 0, 0, .08) 75%, rgba(0, 0, 0, .08) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(0, 0, 0, .08) 25%, rgba(0, 0, 0, .08) 26%, transparent 27%, transparent 74%, rgba(0, 0, 0, .08) 75%, rgba(0, 0, 0, .08) 76%, transparent 77%, transparent); - background-size: 50px 50px; -} - -canvas { - width: 100%; - height: 100%; -} - -nav { - position: fixed; - left: 10px; - top: 10px; - width: 100px; -} - -nav button { - border: 2px dashed #bbb; - background: #fff; - border-radius: 5px; - display: block; - width: 100%; - margin-bottom: 10px; - padding: 10px 5px; - font-weight: bold; - cursor: pointer; -} diff --git a/draw/app.js b/draw/app.js deleted file mode 100644 index d8b6ebf..0000000 --- a/draw/app.js +++ /dev/null @@ -1,66 +0,0 @@ -let paintStyle = getComputedStyle(document.querySelector('section')); -let canvas = document.querySelector('canvas'); -let ctx = canvas.getContext('2d'); - -canvas.width = parseInt(paintStyle.getPropertyValue('width')); -canvas.height = parseInt(paintStyle.getPropertyValue('height')); - -var mouse = { - x: 0, - y: 0 -}; - -ctx.lineWidth = 3; -ctx.lineJoin = 'round'; -ctx.lineCap = 'round'; -ctx.strokeStyle = 'limegreen'; - -canvas.addEventListener('mousemove', function(e) { - mouse.x = e.pageX - this.offsetLeft; - mouse.y = e.pageY - this.offsetTop; -}, false); - -canvas.addEventListener('mousedown', function(e) { - ctx.beginPath(); - ctx.moveTo(mouse.x, mouse.y); - canvas.addEventListener('mousemove', onPaint, false); -}, false); - -canvas.addEventListener('mouseup', function() { - canvas.removeEventListener('mousemove', onPaint, false); -}, false); - -var onPaint = function() { - ctx.lineCap = 'round'; - ctx.lineTo(mouse.x, mouse.y); - ctx.stroke(); -}; - - -document.querySelectorAll('nav button').forEach(function(button, idx) { - button.addEventListener('click', function(evt) { - console.log(button.dataset.method); - - switch (button.dataset.method) { - case 'color': - { - ctx.strokeStyle = button.dataset.value; - break; - } - case 'size': - { - ctx.lineWidth = parseInt(button.dataset.value); - break; - } - case 'clear': - { - let clear = confirm('Do you really want to clear canvas?'); - if (clear) { - ctx.clearRect(0, 0, canvas.width, canvas.height); - } - break; - } - } - }); - -}); diff --git a/draw/index.html b/draw/index.html deleted file mode 100644 index 12bead7..0000000 --- a/draw/index.html +++ /dev/null @@ -1,38 +0,0 @@ - - - - - - - - Draw - - - - - -

- - - - - - - - -- cgit v1.2.3