页面手写签名实现：利用Canvas技术将签名保存为图片

目录

前言

html部分

js部分

效果预览

---

前言

Canvas 是 HTML5 中新增的一个元素，它是一个画布，可以用 JavaScript 在网页上绘图。Canvas 是 2D 绘图 API 的一部分，可以用于绘制图形、文字、图片等。与 SVG 不同，Canvas 是基于位图的，不能直接在上面进行复杂的几何运算，而 SVG 则是基于矢量的，可以绘制复杂的几何图形。

使用 Canvas 绘图需要先创建一个 Canvas 对象，然后获取它的 2D 上下文对象，通过这个对象来进行绘图操作。Canvas 的坐标系与 SVG 不同，它的原点在左上角，x 轴向右延伸，y 轴向下延伸。可以使用 Canvas 提供的方法来绘制各种图形，包括直线、矩形、圆形、多边形等。

除了 2D 绘图之外，Canvas 还支持 3D 绘图，可以通过 WebGL API 来实现。WebGL 是基于 OpenGL ES 2.0 的，可以在 Canvas 上实现 3D 图形渲染。使用 WebGL 可以创建更加复杂的三维效果，例如游戏、模拟器等。

Canvas 是 HTML5 中新增的一个重要功能，它提供了一个在网页上绘图的方法，可以用于创建各种图形、动画和游戏等。

html部分

添加一个canvas元素，并设置id属性，设置好尺寸大小，然后添加两个按钮，取消和确定。

<canvas id="canvas" width="800" height="600"></canvas>
<button onclick="reset();">取消</button>
<button onclick="savePic()">确定</button>

js部分

var canvas = document.getElementById('canvas');
canvas.width = '800';
canvas.height = '600';
var ctx = canvas.getContext('2d');
ctx.lineWidth = 2; //直线的宽度状态设置
ctx.fillStyle = "#ffffff"; //直线的颜色状态设置
ctx.strokeStyle = "#058"; //直线的颜色状态设置
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
ctx.fillRect(0, 0, 800, 600);
let isDown = false
// 鼠标按下
canvas.addEventListener('mousedown', (e) => {
    isDown = true
    ctx.beginPath() //开始路径
    ctx.moveTo(e.offsetX, e.offsetY); //绘制点移动
})
// 鼠标移动
canvas.addEventListener('mousemove', (e) => {
    if (isDown) {
        ctx.lineTo(e.offsetX, e.offsetY); //绘制直线
        ctx.stroke() //描边
    }
})
// 鼠标抬起
document.documentElement.addEventListener('mouseup', (e) => {
    isDown = false
})
// 鼠标经过
canvas.addEventListener('mouseover', (e) => {
    canvas.style.cursor = 'crosshair'
})
// 鼠标离开
canvas.addEventListener('mouseout', (e) => {
    canvas.style.cursor = 'default'
})
// 取消
function reset() {
    ctx.fillRect(0, 0, 800, 600);
}
// 保存图片
function savePic() {
    var link = document.createElement("a");
    var imgData = canvas.toDataURL({
        format: 'png',
        quality: 1,
        width: 1920,
        height: 1080
    });
    var strDataURI = imgData.substr(22, imgData.length);
    var blob = dataURLtoBlob(imgData);
    var objurl = URL.createObjectURL(blob);
    link.download = "canvas.png";
    link.href = objurl;
    link.click();
}

function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {
        type: mime
    });
}

这样就可以在页面中使用canvas实现手写签名了。当用户在canvas上按下鼠标并移动时，就会开始绘制签名，松开鼠标时则会结束签名。

效果预览