HTML5 Canvas白板
生活随笔
收集整理的這篇文章主要介紹了
HTML5 Canvas白板
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
看了很多的白板例子，都沒有與保存相關的例子，而我的思路是使用數組來記錄鼠標繪畫時的軌跡坐標，在對數組進行操作，具體怎么把數組中的數據保存到數據庫大家各顯神通，我就不多說了?，F在唯一擔心的是這個數組能保存多少數據呢？據我測試當數組在2萬個值內還是沒什么影響的，之后就不好說····? ·· 先看下面小樣，之后在改進吧。
<!DOCTYPE HTML> <html> <head> <title>Title</title> <style type="text/css">body{position: absolute;margin:0px;left:0px;top:0px;} </style> <script type="text/javascript"> var ctx; var mycanvas; var dtx; var xy = new Array(); //用來保存鼠標軌跡坐標 //var tts; var x ; //鼠標X坐標 var y ;//鼠標Y坐標window.οnlοad=function(){ dtx = document.getElementById("drawCanvas").getContext("2d"); mycanvas = document.getElementById("myCanvas"); ctx = mycanvas.getContext("2d"); ctx.lineWidth = 1; //線寬 dtx.lineWidth = 1; //ctx.lineCap = "round"; //線頭樣式 //tts = document.getElementById("tts"); //方便調試 mycanvas.onmousedown = startmove; //監聽mycanvas的鼠標按下事件 document.documentElement.onmouseup = stopmove; //監聽鼠標移動事件 }//繪畫函數 function drowPad(e) {ctx.save();ctx.beginPath();ctx.moveTo(x,y);ctx.lineTo(e.clientX-2,e.clientY-2); //cilentX獲得的坐標是相對文檔的坐標，我設置了mycanvas的邊框為2像素，所以要減去2ctx.stroke();x = e.clientX-2;y = e.clientY-2;ctx.restore();xy.push([x,y]);//把坐標添加到數組//tts.innerHTML = x+","+y; }//開始繪制的入口 function startmove(e) {x = e.clientX-2; //獲得鼠標按下的第一點的坐標y = e.clientY-2;xy.push([x,y]);//添加到數組mycanvas.onmousemove = drowPad;//監聽mycanvas的鼠標移動事件}//鼠標按鍵被放開時執行 function stopmove(e) {mycanvas.onmousemove = null; //取消mycanvas鼠標移動監聽事件xy.push([0.1,0]);//把特定的值增加到數組，用于標記此次繪畫結束，恢復繪畫時用到 }//根據數組記錄的鼠標軌跡重新恢復畫出的圖形 function drowDTX() { dtx.clearRect(0,0,400,300); //先清空mycanvas，避免累計繪制產生重疊dtx.save();for(var a = 0; a < xy.length; a++){if(xy[a+1][0] == 0.1) //根據數組特定標記判斷是否是此次繪畫的結束點{a+=2;continue;}if(xy[a][0] == 0.1) //根據數組特定標記判斷是否是此次繪畫的結束點{a++;continue;}dtx.beginPath();dtx.moveTo(xy[a][0],xy[a][1]);dtx.lineTo(xy[a+1][0],xy[a+1][1]);dtx.stroke();}dtx.restore(); //tts.innerHTML = xy.length; }</script> </head> <body onselectstart = "return false;"> <canvas style="border: 2px solid #000000" id="myCanvas" width="400" height="300">瀏覽器不支持canvas標簽</canvas> <canvas style="border: 2px solid #000000" id="drawCanvas" width="400" height="300">瀏覽器不支持canvas標簽</canvas><p id="tts"></p> <input type="button" value="重畫" onclick="drowDTX()"> </body> </html>
轉載于:https://www.cnblogs.com/x-man/archive/2012/01/06/2314922.html
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的HTML5 Canvas白板的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C语言输入输出函数
- 下一篇： 如何判断浏览器的请求头是不是结束