h5 word 签字
时间: 2023-10-11 18:05:31 浏览: 31
您可以使用HTML5的Canvas元素和JavaScript来创建一个简单的签字板,让用户在上面签字。以下是一个简单的示例代码:
HTML部分:
```
<canvas id="signature-pad" width="400" height="200"></canvas>
<button onclick="clearCanvas()">Clear</button>
```
JavaScript部分:
```
var canvas = document.getElementById('signature-pad');
var ctx = canvas.getContext('2d');
var drawing = false;
var lastX, lastY;
canvas.addEventListener('mousedown', function(e) {
lastX = e.offsetX;
lastY = e.offsetY;
drawing = true;
});
canvas.addEventListener('mousemove', function(e) {
if(drawing) {
ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(e.offsetX, e.offsetY);
ctx.stroke();
lastX = e.offsetX;
lastY = e.offsetY;
}
});
canvas.addEventListener('mouseup', function(e) {
drawing = false;
});
function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
```
这个例子会创建一个400x200像素的画布,当用户在画布上按下鼠标时,会开始画线,直到用户松开鼠标。当用户点击“Clear”按钮时,会清除画布上的所有内容。
您可以将这个代码嵌入到您的网页中,并根据需要进行修改和定制。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)