<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><!DOCTYPE HTML><br><html><br><head><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></head><br><body><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> ツール[this. value]();<br> };<br> var tools = {<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.ストローク(); <br> };<br> _canvas.onmouseup=function (e){<br> _canvas.onmousemove=null;<br> _canvas.onmouseup=null;<br> tools.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.ストローク();<br> _context.closePath();<br> }; <br> _canvas.onmouseup=function (e){<br> _canvas.onmousemove=null;<br> _canvas.onmouseup=null;<br> tools.updata();<br> }; <br> } <br> },<br> rect:function (){<br> this.reset();<br> _canvas.onmousedown=function (e){<br> var _e = e;<br> _context.ストロークスタイル="#000";<br> _canvas.onmousemove=function (e){ <br> _context.clearRect(0,0,canvas.width,canvas.height);<br> _context.ストロークRect(_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> tools.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.ストローク();<br> _context.closePath();<br> };<br> _canvas。 onmouseup=function (e){<br> _canvas.onmousemove=null;<br> _canvas.onmouseup=null;<br> tools.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 _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.ストローク();<br> _context.closePath(); <br> };<br> _canvas.onmouseup=function (e){<br> _canvas.onmousemove=null;<br> _canvas.onmouseup=null;<br> tools.updata();<br> }; <br> } <br> },<br> リセット:関数 (){<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> ツール['ペン'](); <br> </script><br></body><br></html><br> </div>