手绘板 第一版 欢迎指正~~~~~~
第一次做插件，第一版还没插件化，还有非常多的问题，希望大家多多指教，帮我提一些问题，多谢~~~~
做的插件是移动端的，后续将要变成移动、pc通用。不多说，上代码：
writehand.css:
*{ margin: 0; padding: 0; } html,body{ height: 100%; width: 100%; background-color: #ccc; } .header{ margin: 0 auto; font-size: 40px; text-align: center; } .writeHand{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .headOfWriteHand{ position:fixed; top: 0; left : 0; z-index: 999; height: 50px; width: 100%; background-color: #fff; } .headOfWriteHand span{ margin-left: 4%; margin-right: 4%; vertical-align: middle; line-height: 50px; height: 50px; } .mainOfWriteHand{ height: auto; width: auto; /*background-color: rgba(255,255,255,0.5);*/ } canvas{ background-color: rgba(255,255,255,0.7); }
demo.html：
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"/> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/> <title>HTML5绘图板</title> <link rel="stylesheet" type="text/css" href="writehand.css"/> </head> <body> <div style='white-space: pre-wrap; width: 100%;height: auto;'> aaaaaaaaaaaaaa aaaaaaaaaaaaaaa ssssssssss ccccccccccccc ffffffffffffffffffffffffffffffffffffffffffffff vvvvvvvvvvvvvvvvvvvv bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb ddddddd ddddddddddddddddddddd ddddddddddddddddddddddddddddddddddddd ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff bbbbbbbbbbbbb bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb bbbbbbb bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn nnnnnnnnnnnnnnnnnnnnnnnnnnnnn nnnnnnnnnn nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn nnnnnnnnnnnnnnnnnnnnnnnnn nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn nnnnnn nnnnnnnnnnnnnnnnnnnnnnnnnnnnnn nnnnnnnnnnnnnnnnnnnn nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm ttttttttttttttttttttttt ttttttttttttttttttttttttttttttttttttttttttt eeeeeeeeeeeeeee </div> <div class="writeHand" > <div class="headOfWriteHand"> <span class="cancel">取消</span> <span class="reset">重置</span> <span class="prev">撤销</span> <span class="next">反撤销</span> <span class="save">保存</span> </div> <div class="mainOfWriteHand"> <canvas id="board" class="board">您的浏览器不支持</canvas> </div> <canvas id="boardNew" class="board" style="display: none;">您的浏览器不支持</canvas> </div> <div class='header'>效果展示</div> <img class="myimg" style="border: 3px solid yellow"/> <!-- <div class='btn'><button class='a'>点击有惊喜</button></div> --> <script type="text/javascript" src="jquery-2.1.1.js"></script> <script type="text/javascript" src="writehand.js"></script> </body> </html>
writehand.jsvar board = document.getElementById('board'), gc = board.getContext('2d'), //第一块画布,用来画 boardNew = document.getElementById('boardNew'), gcNew = boardNew.getContext('2d'); //第二块画布,用来储存.因为toDataURL和getImageData不能同时用.所以专门分了开来 board.width = (document.documentElement.clientWidth) * 3; //gcWidth; board.height = (document.documentElement.clientHeight) * 2; //gcHeight; gc.strokeStyle = 'rgb(0,0,0)'; //第一块画布笔触颜色 gc.lineWidth = 1; //第一块画布笔触像素 gcNew.strokeStyle = 'rgb(0,0,0)'; //第二块画布笔触颜色 gcNew.lineWidth = 1; //第二块画布笔触像素 var recede = [], //存放历史笔画数组 forward = [], //存放可以反撤销笔画的数组 currentPath = [], //目前的笔画集合 currentPoint; //当前坐标点对象 $('body').on('click', '.headOfWriteHand span', function(e) { var classN = $(this).attr("class"); switch(classN) { case 'cancel': $('.writeHand').hide(); break; case 'reset': gc.clearRect(0, 0, board.width, board.height); //gc.beginPath();可能会用 recede.length = 0; //记得在这里把记录的数组清空 break; case 'prev': if (recede.length != 0) { forward.push(recede.pop()); gc.clearRect(0, 0, board.width, board.height); if (recede.length > 0) { for (var i = 0; i < recede.length; i++) { gc.beginPath(); var currentX = recede[i][0].x, currentY = recede[i][0].y; gc.moveTo(currentX, currentY); for (var j = 0; j < recede[i].length; j++) { currentX = recede[i][j].x; currentY = recede[i][j].y; gc.lineTo(currentX, currentY); gc.stroke(); event.preventDefault();//why? } gc.closePath(); } } } break; case 'next': if (forward.length != 0) { // if( recede.length > 0 ) { gc.beginPath(); var leng = forward.length - 1; gc.moveTo(forward[leng][0].x, forward[leng][0].y); for (var i = 1; i < forward[leng].length; i++) { gc.lineTo(forward[leng][i].x, forward[leng][i].y); gc.stroke(); event.preventDefault(); } recede.push(forward.pop()); gc.closePath(); } break; case 'save': var smallX, smallY, bigX, bigY; if (recede.length) { if (recede[0][0].x > recede[0][1].x) { smallX = recede[0][1].x; bigX = recede[0][0].x; } else { bigX = recede[0][1].x; smallX = recede[0][0].x; } if (recede[0][0].y > recede[0][1].y) { smallY = recede[0][1].y; bigY = recede[0][0].y; } else { bigY = recede[0][1].y; smallY = recede[0][0].y; } } for (var i = 0; i < recede.length; i++) { for (var j = 0; j < recede[i].length; j++) { smallX = (smallX < recede[i][j].x ) ? smallX : recede[i][j].x; bigX = (bigX > recede[i][j].x ) ? bigX : recede[i][j].x; smallY = (smallY < recede[i][j].y ) ? smallY : recede[i][j].y; bigY = (bigY > recede[i][j].y ) ? bigY : recede[i][j].y; } } var gcWidth = bigX - smallX, gcHeight = bigY - smallY; var imgData = gc.getImageData(smallX, smallY, gcWidth, gcHeight); $('#board').hide(); boardNew.width = gcWidth; boardNew.height = gcHeight; $('#boardNew').show(); gcNew.putImageData(imgData, 0, 0); var image = new Image(); image.src = boardNew.toDataURL("image/png", 0.5); $('.myimg').attr('src', image.src); $('.writeHand').hide(); break; } }); board.ontouchstart = function(event) { forward.length = 0; var e = window.event || event, doc = document.documentElement, body = document.body, ex = e.touches[0].clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0), //|| e.pageX,//e.touches[0]获取第一个触点 ey = e.touches[0].clientY + (doc && doc.scrollTop || body && body.scrollTop || 0), // || e.pageY, startX = ex - this.offsetLeft, startY = ey - this.offsetTop; //设置鼠标一定按下状态 // isMouseDown = true; currentPoint = { "x" : startX, "y" : startY }; currentPath.push(currentPoint); gc.beginPath(); //丢弃任何当前定义的路径并且开始一条新的路径 gc.moveTo(startX, startY); } board.ontouchmove = function(event) { var e = window.event || event, doc = document.documentElement, body = document.body, // ex = e.x || e.pageX, ey = e.y || e.pageY, ex = e.touches[0].clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0), //|| e.pageX, ey = e.touches[0].clientY + (doc && doc.scrollTop || body && body.scrollTop || 0), // || e.pageY, lineX = ex - this.offsetLeft, lineY = ey - this.offsetTop; if (e.touches[1]) { var edoubleX = e.touches[1].clientX || e.pageX, //e.touches[0]获取第一个触点 edoubleY = e.touches[1].clientY || e.pageY; //startDoubleX = edoubleX - this.offsetLeft, //startDoubleY = edoubleY - this.offsetTop; $('.board').animate({ left : -edoubleX, top : -edoubleY }); } else { gc.lineTo(lineX, lineY); gc.stroke(); event.preventDefault();//why? currentPoint = { "x" : lineX, "y" : lineY }; //记录每一步坐标点 currentPath.push(currentPoint); }; //鼠标移出画布和鼠标抬起事件，处理方式相同 board.ontouchend = board.ontouchcancel = function(event) { // isMouseDown = false; if (currentPath.length > 2) {//三个像素点以上才放进去 recede.push(currentPath.slice(0)); }; currentPath.length = 0; gc.closePath(); }; };
