没事仿照windows画板工具用canvas实现了一个简易版的画板。

html：

画板清除全部工具直线矩形圆形轮廓填充形状线条颜色(){ DrawBoard(); 72 }

style.css：

1 *{ 2 margin:0; 3 padding:0; 4 } 5 body{ 6 background:#c9d3e2; 7 } 8 ul,li{ 9 list-style:none; 10 } 11 .canvas{ 12 border:1px solid #ddd; 13 background:#fff; 14 box-shadow:5px 5px 5px rgba(9,93,224,.1); 15 cursor:crosshair; 16 } 17 .toolbar{ 18 padding:7px 0; 19 background:-webkit-linear-gradient(top,#fbfdff,#dce7f5); 20 border-top:1px solid #bac9db; 21 border-bottom:1px solid #bac9db; 22 box-shadow:inset 0 -1px 1px #e5f0fb,inset 0 -1px 1px #cedbeb; 23 overflow:hidden; 24 } 25 .toolbar-box{ 26 float:left; 27 padding:0 6px; 28 } 29 .toolbar-main{ 30 height:80px; 31 overflow:hidden; 32 } 33 .shape-box{ 34 float:left; 35 width:150px; 36 height:58px; 37 border:1px solid #aabbd2; 38 background:#f3f7fc; 39 overflow-y:auto; 40 } 41 .shape-chose{ 42 float:left; 43 margin-left:10px; 44 width:50px; 45 } 46 .shape-chose li{ 47 color:#489de4; 48 line-height:20px; 49 } 50 .shape-lst{ 51 overflow:hidden; 52 } 53 .shape-lst li{ 54 float:left; 55 height:20px; 56 line-height:20px; 57 padding:0 10px; 58 color:#1a6aab; 59 cursor:default; 60 } 61 .shape-lst li:hover{ 62 background:#fbe7c2; 63 } 64 .shape-lst .selected, 65 .shape-lst .selected:hover, 66 .shape-lst li:active{ 67 background:#ffc762; 68 box-shadow:inset 0 0 15px rgba(60,40,3,.2); 69 } 70 .toolbar-title{ 71 text-align:center; 72 color:#738399; 73 font-size:14px; 74 font-family:"Microsoft Yahei"; 75 } 76 .toolbar-split{ 77 float:left; 78 width:1px; 79 height:90px; 80 background:#a5b7d0; 81 box-shadow:0 0 0 1px #ecf1fa; 82 } 83 .color-lst{ 84 overflow:hidden; 85 } 86 .color-lst li{ 87 float:left; 88 margin:0 10px 4px 0; 89 padding:2px; 90 background:#fff; 91 border:1px solid #aabbd2; 92 } 93 .color-lst li span{ 94 display:block; 95 width:22px; 96 height:22px; 97 } 98 .color-lst .black span{ 99 background:#000; 100 } 101 .color-lst .red span{ 102 background:#f00; 103 } 104 .color-lst .blue span{ 105 background:#00f; 106 } 107 .color-lst .green span{ 108 background:#0f0; 109 } 110 .color-lst .yellow span{ 111 background:#ff0; 112 } 113 .color-lst .selected{ 114 border-color:#ffc762; 115 } 116 .toolbar-lineWidth-main{ 117 position:relative; 118 width:100px; 119 overflow:hidden; 120 } 121 .line-width-lst{ :100px; 124 } { 127 overflow:visible; 128 } { 131 position:absolute; 132 top:0; 133 left:0; 134 background:#fff; 135 } 136 .line-width-lst li{ 137 width:100px; 138 height:20px; 139 line-height:20px; 140 } 141 .line-width-lst li span{ 142 display:inline-block; 143 vertical-align:middle; 144 width:100px; 145 background:#000; 146 } 147 .line-width-1 span{ 148 height:1px; 149 } 150 .line-width-2 span{ 151 height:2px; 152 } 153 .line-width-3 span{ 154 height:3px; 155 } 156 .line-width-4 span{ 157 height:4px; 158 } 159 .line-width-5 span{ 160 height:5px; 161 } 162 .line-width-lst .selected{ 163 background:#ffc762; 164 }

drawBoard.js：