<br><div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode1'));"><u>复制代码</u></span></div>代码如下:</div> <div class="msgborder" id="phpcode1"> <br><br><br><br> <meta charset="UTF-8"> <br> <title>HTML5示例</title> <br> <style type="text/css"><br /> #container{border:1px solid #ccc;width:800px;height:600px;position:relative;}<br /> canvas{position:absolute;top:0px;left:0px;z-index:1;}<br /> </style> <br><br><br> <select id="tools"><br> <option value="pen">铅笔</option> <br> <option value="line">直线</option> <br> <option value="rect">矩形</option> <br> <option value="circle">圆形</option> <br> <option value="ellipse">椭圆</option> <br> </select><br> <div id="container"> <br> <canvas id="canvas" width="800" height="600"></canvas><br> <canvas id="canvas_temp" style="z-index:2;" width="800" height="600"></canvas><br> </div> <br> <script type="text/javascript"> <br /> var canvas = document.getElementById('canvas');<br /> var context = canvas.getContext('2d');<br /> <br /> var _canvas = document.getElementById('canvas_temp');<br /> var _context = _canvas.getContext('2d');<br /> var tools= document.getElementById('tools');<br /> <br /> tools.onchange = function (e){ <br /> tool[this.value]();<br /> };<br /> var tool = {<br /> pen:function (){<br /> this.reset();<br /> _canvas.onmousedown=function (e){<br /> _context.moveTo(e.layerX,e.layerY);<br /> _canvas.onmousemove=function (e){<br /> _context.lineTo(e.layerX,e.layerY);<br /> _context.stroke();<br /> };<br /> _canvas.onmouseup=function (e){<br /> _canvas.onmousemove=null;<br /> _canvas.onmouseup=null;<br /> tool.updata();<br /> };<br /> };<br /> },<br /> line:function (){<br /> this.reset();<br /> _canvas.onmousedown=function (e){<br /> var _e = e; <br /> _canvas.onmousemove=function (e){ <br /> _context.clearRect(0,0,canvas.width,canvas.height);<br /> _context.beginPath();<br /> _context.moveTo(_e.layerX,_e.layerY);<br /> _context.lineTo(e.layerX,e.layerY);<br /> _context.stroke();<br /> _context.closePath();<br /> }; <br /> _canvas.onmouseup=function (e){<br /> _canvas.onmousemove=null;<br /> _canvas.onmouseup=null;<br /> tool.updata();<br /> }; <br /> } <br /> },<br /> rect:function (){<br /> this.reset();<br /> _canvas.onmousedown=function (e){<br /> var _e = e;<br /> _context.strokeStyle="#000";<br /> _canvas.onmousemove=function (e){ <br /> _context.clearRect(0,0,canvas.width,canvas.height);<br /> _context.strokeRect(_e.layerX,_e.layerY,e.layerX-_e.layerX,e.layerY-_e.layerY);<br /> };<br /> _canvas.onmouseup=function (e){<br /> _canvas.onmousemove=null;<br /> _canvas.onmouseup=null;<br /> tool.updata();<br /> }; <br /> } <br /> },<br /> circle:function (){<br /> this.reset();<br /> _canvas.onmousedown=function (e){<br /> var _e = e;<br /> _canvas.onmousemove=function (e){ <br /> _context.clearRect(0,0,canvas.width,canvas.height);<br /> _context.beginPath();<br /> _context.arc(_e.layerX,_e.layerY,e.layerX-_e.layerX,0,Math.PI*2,true);<br /> _context.stroke();<br /> _context.closePath();<br /> };<br /> _canvas.onmouseup=function (e){<br /> _canvas.onmousemove=null;<br /> _canvas.onmouseup=null;<br /> tool.updata();<br /> }; <br /> } <br /> },<br /> ellipse:function (){<br /> this.reset();<br /> _canvas.onmousedown=function (e){<br /> var _e = e; <br /> _canvas.onmousemove=function (e){<br /> var st=0;<br /> _context.clearRect(0,0,canvas.width,canvas.height);<br /> _context.beginPath();<br /> _context.moveTo(_e.layerX+(e.layerX-_e.layerX)*Math.cos(st), _e.layerY+(e.layerX-_e.layerX)*Math.sin(st));<br /> st+=1/180*Math.PI; <br /> for(var i=0;i<360;i++){<br /> _context.lineTo(_e.layerX+(e.layerX-_e.layerX)*Math.cos(st),_e.layerY+(e.layerY-_e.layerY)*Math.sin(st));<br /> st+=1/180*Math.PI;<br /> }<br /> _context.stroke();<br /> _context.closePath();<br /> };<br /> _canvas.onmouseup=function (e){<br /> _canvas.onmousemove=null;<br /> _canvas.onmouseup=null;<br /> tool.updata();<br /> }; <br /> } <br /> },<br /> reset:function (){<br /> _canvas.onmousedown=null;<br /> _canvas.onmouseup=null;<br /> _canvas.onmousemove=null;<br /> },<br /> updata:function (){ <br /> context.drawImage(_canvas, 0, 0);<br /> _context.clearRect(0, 0, canvas.width, canvas.height);<br /> }<br /> };<br /> tool['pen'](); <br /> </script><br><br><br> </div>
