Html5 canvas 应用于webkit浏览器实现电子签名
? ?前段时间做了一个html5的小应用，将电子签名整合到系统的审批中。
?还好，发现html5实现起来很方便。
?
webkit浏览器，便可以使用canvas来完成画板签名。如下图
代码如下：
在网上收集了些资料，稍微整理修改了下，保证copy即可运行。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">#canvas{ border:1px solid #ccc;}</style></head><body><div id="canvasDiv"></div><button id="btn_clear">Clear</button><button id="btn_submit">Submit</button><script language="javascript">var canvasDiv = document.getElementById('canvasDiv');var canvas = document.createElement('canvas');var canvasWidth = 600, canvasHeight=400;var point = {};point.notFirst = false;canvas.setAttribute('width', canvasWidth);canvas.setAttribute('height', canvasHeight);canvas.setAttribute('id', 'canvas');canvasDiv.appendChild(canvas);if(typeof G_vmlCanvasManager != 'undefined') {canvas = G_vmlCanvasManager.initElement(canvas);}var context = canvas.getContext("2d");canvas.addEventListener("mousedown", function(e){ var mouseX = e.pageX - this.offsetLeft; var mouseY = e.pageY - this.offsetTop; paint = true; addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop); redraw();});canvas.addEventListener("mousemove", function(e){ if(paint){ addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true); redraw(); }});canvas.addEventListener("mouseup", function(e){ paint = false;});canvas.addEventListener("mouseleave", function(e){ paint = false;});var clickX = new Array();var clickY = new Array();var clickDrag = new Array();var paint;function addClick(x, y, dragging){ clickX.push(x); clickY.push(y); clickDrag.push(dragging);}function redraw(){ //canvas.width = canvas.width; // Clears the canvas context.strokeStyle = "#df4b26"; context.lineJoin = "round"; context.lineWidth = 5; while (clickX.length > 0 ) { point.bx = point.x; point.by = point.y; point.x = clickX.pop(); point.y = clickY.pop(); point.drag = clickDrag.pop(); context.beginPath(); if (point.drag && point.notFirst) { context.moveTo(point.bx, point.by); } else { point.notFirst = true; context.moveTo(point.x - 1, point.y); } context.lineTo(point.x, point.y); context.closePath(); context.stroke(); }/* for(var i=0; i < clickX.length; i++) { context.beginPath(); if(clickDrag[i] && i){ context.moveTo(clickX[i-1], clickY[i-1]); }else{ context.moveTo(clickX[i]-1, clickY[i]); } context.lineTo(clickX[i], clickY[i]); context.closePath(); context.stroke(); } */}var clear = document.getElementById("btn_clear");var submit = document.getElementById("btn_submit");clear.addEventListener("click", function(){canvas.width = canvas.width;});submit.addEventListener("click", function(){alert(canvas.toDataURL("image/png"));});</script></body></html>
各种检测：http://diveintohtml5.org/detect.html
对于IE9以下的支持网上应该是有控件的，我没再研究了。
html5是一次web变革？
?
?