[html 5][JavaScript]Flashを使わずにお絵かきソフトを作る

昨日のエントリーでcanvasタグの中で図形を描くというのを書いたが、となると当然、脊髄反射的に作ってしまうのがお絵かきソフト。

さっそくソースを紹介します。

<div id="container"> <canvas id="draw_canvas" width="300" height="240" style="border:solid 1px #000000;" onMouseDown="DrawInstance.MouseDown();" onMouseMove="DrawInstance.MouseMove();" onMouseUp="DrawInstance.MouseUp();" onMouseOut="DrawInstance.MouseOut();" onMouseOver="DrawInstance.MouseOver();" ></canvas> </div> <script type="text/javascript"> var currentlayerX = ""; var currentlayerY = ""; window.onmousemove = (function(evt){ currentlayerX = evt.layerX; currentlayerY = evt.layerY; }); DrawClass = function() { this.canvasinflag = 0; this.canvas = document.getElementById("draw_canvas"); this.context = this.canvas.getContext("2d"); this.context.strokeStyle = "rgba(0,0,0,1)"; this.currentX = ""; this.currentY = ""; }; DrawClass.prototype.MouseDown = function(){ this.canvasinflag = 1; this.context.beginPath(); this.context.moveTo(currentlayerX,currentlayerY); }; DrawClass.prototype.MouseMove = function(){ if(this.canvasinflag == 1){ this.context.lineTo(currentlayerX,currentlayerY); this.context.stroke(); this.context.moveTo(currentlayerX,currentlayerY); } } DrawClass.prototype.MouseUp = function(){ this.canvasinflag = 0; this.context.closePath(); }; DrawClass.prototype.MouseOver = function(){ if(this.canvasinflag == 1){ this.context.moveTo(currentlayerX,currentlayerY); } } DrawClass.prototype.MouseOut = function(){ this.context.closePath(); } DrawInstance = new DrawClass(); </script>

canvasタグのメソッドやプロパティについては、こちらを参照しました。

実行結果はこのようになっています。
(黒い枠の中をドラッッグすると黒い線が描画されます。)

例のごとく、firefoxとchromeでは確認したけど、IEはどうなのだろうか？

ちなみに、html5の本がでているみたいなんだけど、これほしいなー。