HTML5 Canvas白板
生活随笔
收集整理的這篇文章主要介紹了
HTML5 Canvas白板
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
看了很多的白板例子，都沒有與保存相關(guān)的例子，而我的思路是使用數(shù)組來記錄鼠標(biāo)繪畫時(shí)的軌跡坐標(biāo)，在對(duì)數(shù)組進(jìn)行操作，具體怎么把數(shù)組中的數(shù)據(jù)保存到數(shù)據(jù)庫(kù)大家各顯神通，我就不多說了。現(xiàn)在唯一擔(dān)心的是這個(gè)數(shù)組能保存多少數(shù)據(jù)呢？據(jù)我測(cè)試當(dāng)數(shù)組在2萬個(gè)值內(nèi)還是沒什么影響的，之后就不好說····? ·· 先看下面小樣，之后在改進(jìn)吧。
<!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(); //用來保存鼠標(biāo)軌跡坐標(biāo) //var tts; var x ; //鼠標(biāo)X坐標(biāo) var y ;//鼠標(biāo)Y坐標(biāo)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"); //方便調(diào)試 mycanvas.onmousedown = startmove; //監(jiān)聽mycanvas的鼠標(biāo)按下事件 document.documentElement.onmouseup = stopmove; //監(jiān)聽鼠標(biāo)移動(dòng)事件 }//繪畫函數(shù) function drowPad(e) {ctx.save();ctx.beginPath();ctx.moveTo(x,y);ctx.lineTo(e.clientX-2,e.clientY-2); //cilentX獲得的坐標(biāo)是相對(duì)文檔的坐標(biāo)，我設(shè)置了mycanvas的邊框?yàn)?像素，所以要減去2ctx.stroke();x = e.clientX-2;y = e.clientY-2;ctx.restore();xy.push([x,y]);//把坐標(biāo)添加到數(shù)組//tts.innerHTML = x+","+y; }//開始繪制的入口 function startmove(e) {x = e.clientX-2; //獲得鼠標(biāo)按下的第一點(diǎn)的坐標(biāo)y = e.clientY-2;xy.push([x,y]);//添加到數(shù)組mycanvas.onmousemove = drowPad;//監(jiān)聽mycanvas的鼠標(biāo)移動(dòng)事件}//鼠標(biāo)按鍵被放開時(shí)執(zhí)行 function stopmove(e) {mycanvas.onmousemove = null; //取消mycanvas鼠標(biāo)移動(dòng)監(jiān)聽事件xy.push([0.1,0]);//把特定的值增加到數(shù)組，用于標(biāo)記此次繪畫結(jié)束，恢復(fù)繪畫時(shí)用到 }//根據(jù)數(shù)組記錄的鼠標(biāo)軌跡重新恢復(fù)畫出的圖形 function drowDTX() { dtx.clearRect(0,0,400,300); //先清空mycanvas，避免累計(jì)繪制產(chǎn)生重疊dtx.save();for(var a = 0; a < xy.length; a++){if(xy[a+1][0] == 0.1) //根據(jù)數(shù)組特定標(biāo)記判斷是否是此次繪畫的結(jié)束點(diǎn){a+=2;continue;}if(xy[a][0] == 0.1) //根據(jù)數(shù)組特定標(biāo)記判斷是否是此次繪畫的結(jié)束點(diǎn){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標(biāo)簽</canvas> <canvas style="border: 2px solid #000000" id="drawCanvas" width="400" height="300">瀏覽器不支持canvas標(biāo)簽</canvas><p id="tts"></p> <input type="button" value="重畫" onclick="drowDTX()"> </body> </html>
轉(zhuǎn)載于:https://www.cnblogs.com/x-man/archive/2012/01/06/2314922.html
《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀總結(jié)
以上是生活随笔為你收集整理的HTML5 Canvas白板的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C语言输入输出函数
- 下一篇： 2017年html5行业报告,云适配发布