1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 #mycanvas{ 8 border: 1px solid; 9 } 10 11 </style> 12 </head> 13 <body> 14 <canvas id="mycanvas" width="800px" height="600px"></canvas> 15 <input type="color" name="colorselect" id="colorselect" onchange="colorchanged()" value="" /> 16 <input type="button" name="backout" id="backout" onclick="popout()" value="撤销" /> 17 <input type="button" name="eraser" id="eraser" onclick="eraser()" value="橡皮" /> 18 <input type="range" name="range1" id="range1" value="1" min="1" max="30" /> 19 <script type="text/javascript"> 20 var can=document.getElementById("mycanvas"); 21 var cxt=can.getContext("2d"); 22 var colorselect=document.getElementById("colorselect"); 23 var thickness=document.getElementById("range1"); 24 25 var color="#000"; 26 var imageDatas=new Array(); 27 can.onmousedown=function(e){ 28 var imagedata=cxt.getImageData(0,0,1000,500); 29 imageDatas.push(imagedata); 30 cxt.lineWidth=thickness.value; 31 32 cxt.beginPath(); 33 cxt.strokeStyle=color; 34 cxt.moveTo(e.pageX,e.pageY); 35 document.onmousemove=function(e){ 36 cxt.lineTo(e.pageX,e.pageY); 37 cxt.stroke(); 38 } 39 document.onmouseup=function(e){ 40 document.onmousemove=null; 41 cxt.closePath(); 42 var imagedata=cxt.getImageData(0,0,1000,500); 43 //console.log(typeof()); 44 ImageData[imagedata.length]=imagedata; 45 } 46 } 47 function colorchanged(){ 48 color=colorselect.value; 49 console.log(colorselect.value); 50 } 51 function popout(){ 52 cxt.putImageData(imageDatas.pop(),0,0); 53 } 54 function eraser(){ 55 color="#fff"; 56 } 57 </script> 58 </body> 59 </html>