你的位置:首页 > 网页设计

[网页设计]使用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>

大家做成后的木模样