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());
 }