制作手写签名
<!DOCTYPE html>
<!-- saved from url=(0056)http://hao2013.cn/canvas-special-master/brush/index.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>簽名板(支持移動端)</title></head><style type="text/css">* {margin: 0;padding: 0;}.canvas {/*width: 100%;*/display: block;border: 1px solid red;}#clear,#clear1,#save {margin: 0 auto;display: inline-block;padding: 5px 10px;width: 50px;height: 40px;line-height: 40px;border: 1px solid #C8C7CC;background: #cccccc;border-radius: 10px;text-align: center;margin: 20px auto;cursor: pointer;}</style><body data-ext-version="1.4.2"><canvas id="canvas" width="600" height="600" style="background: #CCCCCC;">您的瀏覽器不支持canvas技術,請升級瀏覽器!</canvas><div style="text-align: center"><span id="clear">清空</span><span id="save">保存</span></div></body><script type="text/javascript">function WriteFont(id, options) {var self = this;this.canvas = document.getElementById(id);var obj = {canvas: this.canvas,context: this.canvas.getContext("2d"),isWrite: false, //是否開始lastWriteTime: -1,lastWriteSpeed: 0,lastWriteWidth: 0,canvasWidth: 600, //canvas寬高canvasHeight: 600,isShowBorder: true, //是否顯示網格bgColor: '#ccc', //背景色borderWidth: 2, // 網格線寬度borderColor: "#fff", //網格顏色lastPoint: {}, //writeWidth: 2, //基礎軌跡寬度maxWriteWidth: 30, // 寫字模式最大線寬minWriteWidth: 1, // 寫字模式最小線寬writeColor: '#000', // 軌跡顏色isWriteName: false //簽名模式}for (var name in options) {obj[name] = options[name];}/*** 軌跡寬度*/this.setLineWidth = function() {var nowTime = new Date().getTime();var diffTime = nowTime - obj.lastWriteTime;obj.lastWriteTime = nowTime;var returnNum = obj.minWriteWidth + (obj.maxWriteWidth - obj.minWriteWidth) * diffTime / 30;if (returnNum < obj.minWriteWidth) {returnNum = obj.minWriteWidth;} else if (returnNum > obj.maxWriteWidth) {returnNum = obj.maxWriteWidth;}returnNum = returnNum.toFixed(2);//寫字模式和簽名模式if (obj.isWriteName) {obj.context.lineWidth = obj.writeWidth;} else {obj.context.lineWidth = obj.lastWriteWidth = obj.lastWriteWidth / 4 * 3 + returnNum / 4;}}/*** 繪制軌跡*/this.writing = function(point) {obj.context.beginPath();obj.context.moveTo(obj.lastPoint.x, obj.lastPoint.y);obj.context.lineTo(point.x, point.y);self.setLineWidth();obj.context.stroke();obj.lastPoint = point;obj.context.closePath();}/*** 軌跡樣式*/this.writeContextStyle = function() {obj.context.beginPath();obj.context.strokeStyle = obj.writeColor;obj.context.lineCap = 'round';obj.context.lineJoin = "round";}/*** 寫開始*/this.writeBegin = function(point) {obj.isWrite = true;obj.lastWriteTime = new Date().getTime();obj.lastPoint = point;self.writeContextStyle();}/*** 寫結束*/this.writeEnd = function() {obj.isWrite = false;}/*** 清空畫板*/this.canvasClear = function() {obj.context.save();obj.context.strokeStyle = '#fff';obj.context.clearRect(0, 0, obj.canvasWidth, obj.canvasHeight);if (obj.isShowBorder && !obj.isWriteName) {obj.context.beginPath();var size = obj.borderWidth / 2;//畫外面的框obj.context.moveTo(size, size);obj.context.lineTo(obj.canvasWidth - size, size);obj.context.lineTo(obj.canvasWidth - size, obj.canvasHeight - size);obj.context.lineTo(size, obj.canvasHeight - size);obj.context.closePath();obj.context.lineWidth = obj.borderWidth;obj.context.strokeStyle = obj.borderColor;obj.context.stroke();//畫里面的框obj.context.moveTo(0, 0);obj.context.lineTo(obj.canvasWidth, obj.canvasHeight);obj.context.lineTo(obj.canvasWidth, obj.canvasHeight / 2);obj.context.lineTo(obj.canvasWidth, obj.canvasHeight / 2);obj.context.lineTo(0, obj.canvasHeight / 2);obj.context.lineTo(0, obj.canvasHeight);obj.context.lineTo(obj.canvasWidth, 0);obj.context.lineTo(obj.canvasWidth / 2, 0);obj.context.lineTo(obj.canvasWidth / 2, obj.canvasHeight);obj.context.stroke();}obj.context.restore();}/*** 保存圖片 格式base64*/this.saveAsImg = function() {var image = new Image();image.src = this.canvas.toDataURL("image/png");if (image.src == this.emptyCanvas) {alert('請先書寫')} else {console.log('提交的內容===>', image.src)}};/*** 初始化畫板*/this.canvasInit = function() {this.canvas.width = obj.canvasWidth;this.canvas.height = obj.canvasHeight;this.emptyCanvas = this.canvas.toDataURL("image/png");}/**======================事件綁定===========================**/this.canvas.addEventListener('mousedown', function(e) {var point = {x: e.offsetX || e.clientX,y: e.offsetY || e.clientY};self.writeBegin(point);});this.canvas.addEventListener('mouseup', function(e) {var point = {x: e.offsetX,y: e.offsetY};self.writeEnd(point);});this.canvas.addEventListener('mouseleave', function(e) {var point = {x: e.offsetX,y: e.offsetY};self.writeEnd(point);});this.canvas.addEventListener('mousemove', function(e) {if (obj.isWrite) {var point = {x: e.offsetX,y: e.offsetY};self.writing(point);}});//移動端this.canvas.addEventListener('touchstart', function(e) {var touch = e.targetTouches[0];var point = {x: touch.pageX || touch.clientX,y: touch.pageY || touch.clientY};self.writeBegin(point);});this.canvas.addEventListener('touchend', function(e) {var touch = e.changedTouches[0];var point = {x: touch.pageX,y: touch.pageY};self.writeEnd(point);});this.canvas.addEventListener('touchmove', function(e) {var touch = e.targetTouches[0];var point = {x: touch.pageX,y: touch.pageY};self.writeEnd(point);});this.canvas.addEventListener('touchmove', function(e) {var touch = e.targetTouches[0];var point = {x: touch.pageX,y: touch.pageY};self.writing(point);});this.canvasInit();this.canvasClear();this.option = obj;obj.control = {clearCanvas: self.canvasClear};}/*** 初始化調用* 設置參數*/var writeCanvas = new WriteFont('canvas', {borderWidth: 10,writeWidth: 3,borderColor: '#ff6666',isWriteName: true //簽名模式});document.getElementById('clear').onclick = function() {writeCanvas.option.control.clearCanvas();};document.getElementById('save').onclick = function() {writeCanvas.saveAsImg()};</script>
</html>
總結
- 上一篇： mockjs（接口服务代理）
- 下一篇： vux 组件库首次使用安装