js绘图 

 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>

 

posted @ 2019-10-21 10:04  insist钢  阅读(267)  评论(0)    收藏  举报