使用canvas制作在线画板

canvas绘图的强大功能，让人前仆后继的去研究它。代码全部加起来不足百行。还用到了h5中的<input type="color"/>和<input type="range"/>

使得页面更加简洁。

本文只用了鼠标的三个事件 onmousedown onmousemove onmouseup就轻松实现了网页画板的制作。

上代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style type="text/css">
 7         #canvas{
 8             border: 1px solid #333;
 9             display: block;
10             margin:20px auto;
11         }
12         #color{
13             width:100px;
14             height:32px;
15             position:absolute;
16             right:115px;
17             top:200px;
18         }
19             #range{
20             width:100px;
21             height:32px;
22             position:absolute;
23             right:115px;
24             top:125px;
25         }
26         #demo{
27             background:black;
28             width:100px;
29             height:5px;
30             position:absolute;
31             right:115px;
32             top:100px;
33         }
34     </style>
35 </head>
36 <body background-color="rgba(0,0,0,0.5)">
37 <div class="box">
38     <h3 align="center">CANVAS制作简单在线画板</h3>
39     <canvas id="canvas" width="800" height="600"></canvas>
40     <input type="color" id="color"/>
41     <div id="demo"></div>
42     <input type="range" id="range" min="1" max="10"/>
43 </div>
44 <script type="text/javascript">
45     var canvas=document.getElementById("canvas");
46     var cxt=canvas.getContext("2d");
47     var color=document.getElementById("color");
48     var size=document.getElementById("range");
49     var demo=document.getElementById("demo");
50     //根据size的变化来使得size上面的线条演示画笔粗细。
51     size.onchange=function(){
52         demo.style.height=size.value+"px";
53     }
54     //使得color的颜色与演示线条的颜色一致
55     color.onchange=function(){
56         demo.style.background=color.value;
57     }
58     var flag=false;
59     //鼠标按下
60     canvas.onmousedown= function (e) {
61         var mouseX= e.pageX-this.offsetLeft;
62         var mouseY= e.pageY-this.offsetTop;
63         flag=true;
64         cxt.beginPath();
65         cxt.lineWidth=size.value;
66         cxt.strokeStyle=color.value; 
67         cxt.moveTo(mouseX,mouseY);
68     };
69     //鼠标移动
70     canvas.onmousemove= function (e) {
71         var mouseX= e.pageX-this.offsetLeft;
72         var mouseY= e.pageY-this.offsetTop;
73         if(flag){
74             
75             cxt.lineTo(mouseX,mouseY);
76             cxt.stroke();
77         }
78     }
79     //鼠标松开
80     canvas.onmouseup= function (e) {
81         flag=false;
82     }
83 </script>
84 </body>
85 </html>

大家做成后的木模样