Created
May 8, 2015 08:02
-
-
Save koduki/869b162d42613601d82a to your computer and use it in GitHub Desktop.
Simple Draw Tool
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Simple Draw Tool</title> | |
| </head> | |
| <body> | |
| <head> | |
| <h1>Simple Presentation Tool</h1> | |
| <p> | |
| <button class="btn_new_block">Block</button> | |
| </p> | |
| </head> | |
| <canvas width="640" height="480" style="border: 1px solid #000000;"></canvas> | |
| <script> | |
| var a = document.querySelector("canvas"), | |
| c = a.getContext("2d"); | |
| var drawble = false; | |
| var sx = 0; | |
| var sy = 0; | |
| var draw_history = []; | |
| a.onmousedown = function (e) { | |
| e.preventDefault(); | |
| sx = e.layerX; | |
| sy = e.layerY; | |
| drawble = true; | |
| }; | |
| a.onmousemove = function (e) { | |
| if(drawble){ | |
| c.clearRect(0,0,640,480); | |
| c.beginPath(); | |
| for(var item of draw_history){ | |
| c.moveTo(item["x1"], item["y1"]); | |
| c.lineTo(item["x2"], item["y2"]); | |
| } | |
| c.moveTo(sx, sy); | |
| c.lineTo(e.layerX, e.layerY); | |
| c.stroke(); | |
| } | |
| }; | |
| a.onmouseup = function (e) { | |
| e.preventDefault(); | |
| draw_history.push({"type":"line","x1":sx,"y1":sy,"x2":e.layerX,"y2":e.layerY}); | |
| drawble = false; | |
| }; | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment