js简易在线画板

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>