HTML5 Canvas 实现在线签字功能(示例代码)

前言

在现代互联网应用中，有时我们需要让用户在网页上进行签字操作，比如确认文件、填写电子表格或者签署合同。利用 HTML5 的 canvas 画布，我们可以轻松地实现这一功能，为用户提供方便快捷的在线签字体验。

一、HTML5 Canvas 简介

HTML5 的 canvas 元素是一种强大的图形渲染工具，它允许开发者使用 JavaScript 在网页上绘制各种图形、动画和交互式内容。通过 canvas，开发者可以创建丰富多彩的视觉效果，并实现复杂的用户交互体验。

HTML5 Canvas的关键特性：

图形绘制能力：Canvas 元素提供了绘制路径、矩形、圆形、直线、文本等基本图形的功能，同时还支持图像的绘制和变换操作，使得开发者能够轻松地创建各种视觉效果。

动画和交互：借助 JavaScript，开发者可以在 Canvas 上创建复杂的动画效果，并添加交互式的操作。这使得 Canvas 成为开发游戏、数据可视化和其他需要动态效果的应用的理想选择。

性能优势：由于 Canvas 是基于 GPU 加速的，因此它具有良好的性能表现，能够处理大量的图形元素和动画效果，而不会对页面的整体性能产生太大影响。

灵活性：Canvas 元素可以轻松地与其他 HTML 元素结合使用，使得开发者可以在页面上创建复杂的混合媒体效果，同时还可以响应用户的交互操作。

二、签字功能的实现

效果演示

完整代码

HTML代码

<!DOCTYPE html>
<htmlclass=\”no-js\”>
<head>
<metaname=\”viewport\”
content=\”width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,user-scalable=no,viewport-fit=cover\”>
<metahttp-equiv=\”Cache-Control\”content=\”no-cache, no-store, must-revalidate\”/>
<metahttp-equiv=\”expires\”CONTENT=\”Wed, 26 Feb 1997 08:21:57 GMT\”>
<metahttp-equiv=\”Content-Type\”content=\”text/html; charset=UTF-8\”>
<metahttp-equiv=\”X-UA-Compatible\”content=\”IE=edge\”>
<metahttp-equiv=\”Pragma\”content=\”no-cache\”>
<metahttp-equiv=\”Cache\”content=\”no-cache\”>
<metahttp-equiv=\”Expires\”content=\”0\”>
<metacharset=\”utf-8\”>
<title>画图</title>
<linkrel=\”stylesheet\”href=\”css/bootstrap.css\”>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
text-align: center;
}
canvas {
max-width: 100%;
border: 2px dotted #ccc;
}
</style>
</head>
<body>
<scriptsrc=\”./index.js\”></script>
<script>
//初始化
var sign = new Draw( {
// canvas:document.getElementById(\’canvas\’),
lineWidth: 10, // 线条宽度
width: 400, // canvas 宽
height: 400, //canvas 高
strokeStyle: \’#333333\’ // 线条颜色
} );
window.onload = function () {
// 点击输出图片
document.querySelector( \’.ouput\’ ).onclick = function () {
var img = new Image();
img.style.width = \’200px\’;
img.src = sign.ouput();
img.onload = function () {
document.body.appendChild( img );
}
document.querySelector( \’img\’ ) && document.querySelector( \’img\’ ).remove();
}
// 点击清除
document.querySelector( \’.clear\’ ).onclick = function () {
sign.clear();
}
// 点击撤销
document.querySelector( \’.undo\’ ).onclick = function () {
if ( sign.state.undopath.length > 0 ) {
sign.undo();
} else {
console.log( \’还没有签名\’ );
}
}
}
</script>
<divclass=\”buttons\”>
<buttontype=\”button\”class=\”btn btn-primary ouput\”>生成图片</button>
<buttontype=\”button\”class=\”btn btn-light undo\”>撤销</button>
<buttontype=\”button\”class=\”btn btn-light clear\”>清除画布</button>
</div>
</body>
</html>