javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript canvas手写签名

JavaScript使用canvas实现手写签名功能

作者:xintianyou

最近遇到一个h5手写签名的需求,按理说这种功能网上随便一搜一大把现成的源码和组件,但是像这种比较经典又很简单的功能,还是要弄清楚到底怎么实现的,所以接下来本文就给大家介绍一下如何用canvas实现手写签名功能

预览效果

如果不想阅读文章,可直接查看源码

先实现基本需求(能签名即可)

整理思路

<canvas width="600" height="400" id="canvas" style="background-color: #ddd;"></canvas>

为了方便调试,我们本次仅演示pc端的操作。移动端思路是一样的,只不过监听的API不同。

常见的操作方式是:当鼠标左键按下的时候在画布上移动鼠标,就可以绘制。没有按下鼠标时,不管它。

注释很重要,我尽量写得很详细

window.onload = function () {    
    // 默认鼠标是没有按下的    
    let isDown = false;    
    // 记录上一次鼠标的位置    
    let lastX = 0; // x轴    
    let lastY = 0; // y轴        
    // 获取canvas
    const canvas = document.getElementById("canvas");    
    // 获取canvas的上下文    
    const ctx = canvas.getContext("2d");    
    // 定义线条的宽度,即画笔的粗细    
    ctx.lineWidth = 3;    
    // 定义画笔的颜色    
    ctx.strokeStyle = "#000";    
    /**
      * 定义绘制方法
      * 线条其实是由两个点连起来的一个线段
      * 一个又一个的小线段,连起来就组成了一个线条
      * 在画布上绘制线条,主要用到的三个核心方法      
      * moveTo: 是 Canvas 2D API 将一个新的子路径的起始点移动到 (x,y) 坐标的法。   
      * lineTo: 是 Canvas 2D API 使用直线连接子路径的终点到 x,y 坐标的法。      
      * 当然,定义了起点和终点还不够,还需要手动调用开始绘制这个路径
      * startX 和 startY 一起组成了起点的坐标
      * endX 和 endY 一起组成了线段终点的坐标
      */
    function draw(startX, startY, endX, endY) {        
        // 起点        
        ctx.moveTo(startX, startY);        
        // 终点        
        ctx.lineTo(endX, endY);        
        // 调用 stroke,即可看到绘制的线条        
        ctx.stroke();    
    }    
    // 监听鼠标按下,得到按下时鼠标在画布上的坐标    
    canvas.addEventListener("mousedown", ({ x, y }) => {
        isDown = true;
        // 按下时的点作为起点
        lastX = x;
        lastY = y;
        // 创建一个新的路径
        ctx.beginPath();
    }, false);    
    // 监听鼠标移动    
    canvas.addEventListener("mousemove", ({ x, y }) => {            
      // 没有按下就不管
      if (!isDown) return;
      // 调用绘制方法
      draw(lastX, lastY, x, y);
      // 把当前移动时的坐标作为下一次的绘制路径的起点
      lastX = x;
      lastY = y;
    }, false);
    // 监听鼠标抬起
    canvas.addEventListener("mouseup", () => {
      isDown = false;
      // 关闭路径
      ctx.closePath();
    }, false);
    // 监听鼠标移出
    canvas.addEventListener("mouseleave", () => {
        // 移出canvas范围,也认为是鼠标抬起了,再移入需要重新按下鼠标,避免移出之后再抬起鼠标,重新进入画笔还能继续画的问题
        isDown = false;
        ctx.closePath();
    }, false);
};

以上代码就实现了最基本的签名功能。

将canvas导出为图片

这个功能比较简单,思路都在注释里了

// 使用canvas的toDataURL()方法,将画布内容转换为base64格式的图片数据:
let imgData = canvas.toDataURL('image/png'); 
// 创建下载链接
let link = document.createElement('a');
link.download = 'picture.png';
link.href = imgData;
// 触发点击
link.click();
// 移除元素
document.body.removeChild(link);

撤销和重写功能

整理思路

改写一下前面的代码

window.onload = function () {    
    // 默认鼠标是没有按下的    
    let isDown = false;    
    // // 记录上一次鼠标的位置    
    // let lastX = 0; // x轴    
    // let lastY = 0; // y轴      
    // 这次要用数组来记录    
    let points = []; // 这是一个笔画的点    
    let allPonits = []; // 这是所有笔画的点        
    // 获取canvas元素     
    const canvas = document.getElementById("canvas");    // 获取canvas的上下文    
    const ctx = canvas.getContext("2d");    // 定义线条的宽度,即画笔的粗细    
    ctx.lineWidth = 3;    // 定义画笔的颜色    
    ctx.strokeStyle = "#000";        
    function draw(startX, startY, endX, endY) {        
        // 起点        
        ctx.moveTo(startX, startY);        
        // 终点        
        ctx.lineTo(endX, endY);        
        // 调用 stroke,即可看到绘制的线条        
        ctx.stroke();    
    }    
    // 监听鼠标按下,得到按下时鼠标在画布上的坐标    
    canvas.addEventListener("mousedown", ({ x, y }) => {            
        isDown = true;            
        // lastX = x;
        // lastY = y;
        // 保存当前坐标作为起点
        points.push({ x, y });            
        // 创建一个新的路径            
        ctx.beginPath();        
     }, false);    
     // 监听鼠标移动    
     canvas.addEventListener("mousemove", ({ x, y }) => {
         // 没有按下就不管
         if (!isDown) return;
         // 调用绘制方法
         // draw(lastX, lastY, x, y);
         // 把当前移动时的坐标作为下一次的绘制路径的起点            
         // lastX = x;
         // lastY = y;
         // 每次都取最后一个点,作为绘制的起点
         const lastPoint = points.at(-1);
         draw(lastPoint.x, lastPoint.y, x, y);
         // 把当前的点保存起来,又作为下一次绘制的起点
         points.push({ x, y });
     }, false);
     // 监听鼠标抬起    
     canvas.addEventListener("mouseup", (e) => {            
         isDown = false;
         // 关闭路径
         ctx.closePath();
         // 鼠标抬起,说明当前这一笔就结束了,把这一笔的所有点的数组放到总的里面
         allPonits.push(points);
         // 清空这一笔画,为下一笔画做准备            
         points = [];
     }, false);
    // 监听鼠标移出
    canvas.addEventListener("mouseleave", () => {
        // 移出canvas范围,也认为是鼠标抬起了,再移入需要重新按下鼠标,避免移出之后再抬起鼠标,重新进入画笔还能继续画的问题
        isDown = false;
        // 关闭画笔
        ctx.closePath();
        // 如果是先抬起鼠标再移出,那么points里面为空,就不保存了
        // 如果是先移出范围,移出时就保存,这样也不会触发上面的监听鼠标抬起事件,也不会push。
        if (points.length) {
            allPonits.push(points);
        }
        // 移出时也清空,因为无法判断是先抬起还是先移出的。
        points = [];
    }, false);
 };

在页面上加两个按钮

<div>
  <button id="prev">上一步</button>
  <button id="reset">重写</button>
</div>
const prev = document.getElementById("prev");
const reset = document.getElementById("reset"); 
// 清空画布
function resetPath() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}
// 上一步
prev.addEventListener("click", (e) => {
    // canvas本身不会记录用户的每一步操作
    // 要回到上一步,只能一次性清空所有的
    resetPath();
    // 删除最后一个笔画
    allPonits.pop();
    // 遍历所有的笔画并重新绘制
    // allPoints 是个二维数组
    allPonits.forEach((ps) => {
        ps.forEach((item, index) => {
          // 下一个坐标点
          let next = ps[index + 1];
          if (next) {
            // 有下一个点才执行,否则到最后一个会报错
            // 开始重新绘制
            ctx.beginPath();
            draw(item.x, item.y, next.x, next.y);
            ctx.closePath();
          }
       });  
    });
});
// 重写
reset.addEventListener("click", () => {
    // 点击重写时清空画布,并清空所有的点    
    resetPath();
    allPonits = [];
}, false);

到这里,我们就完成了canvas手写签名,并且实现了撤销和重写,以及导出为图片的功能。

以上就是JavaScript使用canvas实现手写签名功能的详细内容,更多关于JavaScript canvas手写签名的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文