web页面-电子签名

html

<canvas id=\"canvas\" style=\"border:none ;\"></canvas>

 <div class=\"clearBtn\" ng-click=\"clearDrew()\">重新签名</div>
<div class=\"saveBtn\" ng-click=\"saveDrew()\">确认签订</div>

angularjs 框架 - js

var lastX, lastY;
 var canvasW = document.body.clientWidth - 70;
 console.log(document.body.clientWidth)
 var ctx = document.getElementById(\"canvas\").getContext(\"2d\");
 var c = document.getElementById(\"canvas\");

 $scope.hasTips = true;
 $scope.$on(\'$ionicView.afterEnter\', function () {  //进入页面执行
     InitThis();
     $scope.clearDrew();
     drawTips(true);
 }, false);
 var barHeight = 44; //biao
 //显示or清空 \'最佳书写区\'
 function drawTips(flag) {
     if (flag) {
         ctx.fillStyle = \"#aaa\";
         ctx.font = \"14px Arial\";
         ctx.fillText(\"最佳书写区\", (canvasW - 70) / 2, 80);
         ctx.stroke();
     } else {
         ctx.clearRect(0, 0, canvasW, 200);
     }
 }

 function InitThis() {
     //			触摸屏
     c.addEventListener(\'touchstart\', function (event) {
         if ($scope.hasTips) {
             drawTips(false)
         }
         if (event.targetTouches.length == 1) {
             event.preventDefault();// 阻止浏览器默认事件，重要
             var touch = event.targetTouches[0];
             mousePressed = true;
             console.log(event)
             Draw(touch.pageX - this.offsetLeft, touch.pageY - this.offsetTop - barHeight, false);
         }

     }, false);

     c.addEventListener(\'touchmove\', function (event) {
         if (event.targetTouches.length == 1) {
             event.preventDefault();// 阻止浏览器默认事件，重要
             var touch = event.targetTouches[0];
             if (mousePressed) {
                 Draw(touch.pageX - this.offsetLeft, touch.pageY - this.offsetTop - barHeight, true);
             }
         }
     }, false);

     c.addEventListener(\'touchend\', function (event) {
         if (event.targetTouches.length == 1) {
             event.preventDefault();// 阻止浏览器默认事件，防止手写的时候拖动屏幕，重要
             //      			var touch = event.targetTouches[0];
             mousePressed = false;
         }
     }, false);



     //		   鼠标
     c.onmousedown = function (event) {
         mousePressed = true;
         Draw(event.pageX - this.offsetLeft, event.pageY - this.offsetTop - barHeight, false);
     };

     c.onmousemove = function (event) {
         if (mousePressed) {
             Draw(event.pageX - this.offsetLeft, event.pageY - this.offsetTop - barHeight, true);
         }
     };

     c.onmouseup = function (event) {
         mousePressed = false;
     };
 }
 function Draw(x, y, isDown) {
     y = y * 0.8;
     if (isDown) {
         ctx.beginPath();
         ctx.strokeStyle = \'#333\'; //颜色
         ctx.lineWidth = 3;   //线宽
         ctx.lineJoin = \"round\";
         ctx.moveTo(lastX, lastY);
         ctx.lineTo(x, y);
         ctx.closePath();
         ctx.stroke();
         $scope.hasTips = false;
     }
     lastX = x; lastY = y;
 }
 
//清空内容
 $scope.clearDrew = function () {
     ctx.setTransform(1, 0, 0, 1, 0, 0);
     ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
     $scope.hasTips = true;
     // drawTips(true); 
 }
 
//保存签名内容
 $scope.saveDrew = function () {
     if ($scope.hasTips) {
         CommonService.alertPop(\"温馨提示\", \"请签名。\");
         return;
     }
     var a = document.createElement(\"canvas\");
     a.href = canvas.toDataURL(\"image/png\");
     var base64 = a.href.substr(22);
     if ($scope.Signatrue) {
         $state.go(\"elecSealConfirm\", {
             base64: base64,
             id: \"1\",
             sealType: \"own\"
         })
     } else {
         uploadFileCloud(base64)
     }


     console.log(canvas.toDataURL());
 }