Web前端课，老师教了H5的input的color属性，很方便的获得了颜色值。突发奇想，稍微加一点js代码，随手就是一个画板。平常可以带着做稿子。(去机房写代码懒得带稿子，带上U盘就跑了。。。)
效果：加个菜单，一个canvas绘图，下图是经典欧拉回路图
欢迎使用：在线画板 http://101.132.65.184/Demo/draw.html
ps:9块钱一个月的阿里云
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>在线画板</title> 7 <style type="text/css"> 8 * { 9 margin: 0 auto; 10 } 11 12 #menu { 13 background-color: rgb(38,247,194,0.5); 14 position: fixed; 15 left: 10px; 16 top: 10px; 17 width: 60px; 18 height: 125px; 19 } 20 21 #btnColor { 22 margin-left: 5px; 23 margin-top: 5px; 24 } 25 26 #paint { 27 margin-top: 5px; 28 text-align: center; 29 } 30 31 #eraser { 32 text-align: center; 33 margin-top: 5px; 34 } 35 36 #size { 37 text-align: center; 38 margin-top: 5px; 39 } 40 41 #nsize { 42 width: 40px; 43 } 44 </style> 45 </head> 46 47 <body> 48 <div id="menu"> 49 <div id="btnColor"><input type="color" id="colorPicker" value="#000000"></div> 50 <div id="paint"><button type="button">画笔</button></div> 51 <div id="eraser"><button type="button">笔擦</button></div> 52 <div id="size"><input type="range" id="nsize" min="5" max="100" value="5"></div> 53 </div> 54 <script> 55 const PAINT = 1 56 const ERASER = 0 57 var drawType = PAINT 58 59 function init() { 60 document.body.style.overflow = "hidden" 61 var can = document.createElement('canvas') 62 can.id = "canvas" 63 can.width = window.innerWidth 64 can.height = window.innerHeight 65 document.body.appendChild(can) 66 } 67 68 paint.onclick = function() { 69 drawType = PAINT 70 } 71 72 eraser.onclick = function() { 73 drawType = ERASER 74 } 75 76 window.onresize = function () { 77 var can = document.getElementById("canvas") 78 can.height = window.innerHeight 79 can.width = window.innerWidth 80 } 81 82 window.addEventListener('mousedown', function(e) { 83 var can = document.getElementById("canvas") 84 var ctx = can.getContext('2d') 85 ctx.beginPath() 86 if(e.pageX >= 10 && e.pageX <= 70 && e.pageY >= 10 && e.pageY <= 125) { 87 return ; 88 } 89 90 ctx.moveTo(e.pageX, e.pageY) 91 ctx.lineCap = "round" 92 if(drawType == ERASER) { 93 ctx.strokeStyle = "#fff" 94 ctx.lineWidth = document.getElementById("nsize").value 95 } else { 96 ctx.strokeStyle = document.getElementById("colorPicker").value 97 ctx.lineWidth = document.getElementById("nsize").value 98 } 99 can.onmousemove = function(e) { 100 ctx.lineTo(e.pageX, e.pageY) 101 ctx.stroke() 102 } 103 can.onmouseup = function(e) { 104 ctx.closePath() 105 can.onmousemove = null 106 can.onmouseup = null 107 } 108 }) 109 110 init() 111 </script> 112 </body> 113 114 </html>