html+canvas 实现签名功能-手机触摸

news2024/11/24 2:43:47

手机上的效果图

image

需要注意,手机触摸和鼠标不是一个事件,不能通用,上一篇是关于使用鼠标的样例

相关代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .buttons {
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div>
        <canvas id="signatureCanvas" width="500" height="200" style="border:solid;"></canvas>
        <button onclick="clearSignature()">清除</button>
        <button onclick="undoLast()">清除上一步</button>
        <button onclick="saveSignature()">保存</button>
    </div>
    <script>
        const canvas = document.getElementById('signatureCanvas');
        const ctx = canvas.getContext('2d');

        let isDrawing = false;
        let lastX, lastY;
        let strokes = []; // 用于存储每一步的绘制操作

        // 触摸开始事件
        function handleTouchStart(e) {
			e.preventDefault(); // 阻止默认的触摸事件
            isDrawing = true;
            [lastX, lastY] = [e.touches[0].clientX - canvas.offsetLeft, e.touches[0].clientY - canvas.offsetTop];
            strokes.push([]); // 开始新的笔画
        }

        // 触摸移动事件
        function handleTouchMove(e) {
			e.preventDefault(); // 阻止默认的触摸事件
            if (!isDrawing) return; // 如果没有触摸,则退出函数

            const x = e.touches[0].clientX - canvas.offsetLeft;
            const y = e.touches[0].clientY - canvas.offsetTop;

            ctx.beginPath();
            ctx.moveTo(lastX, lastY);
            ctx.lineTo(x, y);
            ctx.stroke();

            strokes[strokes.length - 1].push({ x: lastX, y: lastY, x2: x, y2: y }); // 记录当前笔画

            [lastX, lastY] = [x, y];
        }

        // 触摸结束事件
        function handleTouchEnd(e) {
			e.preventDefault(); // 阻止默认的触摸事件
            isDrawing = false;
        }

        // 清除签名
        function clearSignature() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            strokes = []; // 清空所有笔画记录
        }

        // 撤销上一步
        function undoLast() {
            strokes.pop(); // 移除最后一个笔画
            redraw(); // 重新绘制画布
        }

        // 重新绘制画布
        function redraw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
            strokes.forEach(stroke => {
                stroke.forEach(line => {
                    ctx.beginPath();
                    ctx.moveTo(line.x, line.y);
                    ctx.lineTo(line.x2, line.y2);
                    ctx.stroke();
                });
            });
        }

        // 保存签名
        function saveSignature() {
            const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);

            // 将图片数据转换成 base64 格式
            const base64ImageData = canvas.toDataURL();
            console.log(base64ImageData);
        }

        // 绑定事件
        canvas.addEventListener('touchstart', handleTouchStart);
        canvas.addEventListener('touchmove', handleTouchMove);
        canvas.addEventListener('touchend', handleTouchEnd);
        canvas.addEventListener('touchcancel', handleTouchEnd);
    </script>
</body>

</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1936713.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

[Vulnhub] MERCY SMB+RIPS-LFI+Tomcat+Ports-Knocking+Timeclock权限提升

信息收集 IP AddressOpening Ports192.168.101.151TCP:80,22,53, 110, 139, 143, 445, 993, 995, 8080 $ $ nmap -p- 192.168.101.151 --min-rate 1000 -sC -sV PORT STATE SERVICE VERSION 53/tcp open domain ISC BIND 9.9.5-3ubuntu0.17 (Ubuntu Linux) …

主从复制 哨兵服务 数据类型 持久化

配置主从复制 一主多从结构 配置一主一从结构 修改配置文件 配置salve服务器 配置带验证的主从复制 查看密码&#xff0c;默认redis服务没有密码 192.168.88.61:6379> config get requirepass 设置密码 192.168.88.61:6379> config set requirepass 123456 输入密码…

分享一个 .NET EF 6 扩展 Where 的方法

前言 Entity Framework 6&#xff08;EF 6&#xff09;中的 Where 方法用于筛选数据库中的数据并返回符合条件的结果&#xff0c;但 Where 方法只能进行简单的筛选条件&#xff0c;例如相等、大于、小于等简单条件&#xff0c;如果需要处理更复杂的逻辑条件&#xff0c;则需要…

【Linux服务器Java环境搭建】011在linux中安装Nginx,以及停止或启动Nginx服务

系列文章目录 【Linux服务器Java环境搭建】 前言 又到了周五晚上了&#xff0c;最近工作上有些忙&#xff0c;忙于一个需求频繁变更的项目&#xff0c;都快吐血了&#xff0c;懂得都懂&#xff0c;哈哈&#xff0c;正好有时间了&#xff0c;继续写系列【Linux服务器Java环境搭…

我去,怎么http全变https了

项目场景&#xff1a; 在公司做的一个某地可视化项目。 部署采用的是前后端分离部署&#xff0c;图片等静态资源请求一台minio服务器。 项目平台用的是http 图片资源的服务器用的是https 问题描述 在以https请求图片资源时&#xff0c;图片请求成功报200。 【现象1】: 继图…

设计模式11-原型模式

设计模式11-原型模式 写在前面对象创建模式典型模式原型模式动机结构代码推导应用特点要点总结 原型模式与工厂方法模式对比工厂方法模式原型模式什么时候用什么模式 写在前面 对象创建模式 通过对象创建模式绕开动态内存分配来避免创建过程中所导致的耦合过紧的问题。从而支…

【devops】gitlab 实现cicd 实践

本站以分享各种运维经验和运维所需要的技能为主 《python零基础入门》&#xff1a;python零基础入门学习 《python运维脚本》&#xff1a; python运维脚本实践 《shell》&#xff1a;shell学习 《terraform》持续更新中&#xff1a;terraform_Aws学习零基础入门到最佳实战 《k8…

AWS服务器购买:如何选择合适的AWS云服务器

在当今数字化时代,云计算已成为企业IT基础设施的重要组成部分。作为全球领先的云服务提供商之一,亚马逊网络服务(AWS)提供了丰富多样的云服务器选项。然而,面对众多选择,如何为您的业务需求挑选最合适的AWS云服务器呢?我们结合九河云的分析来给你解答。 1. 明确业务需求 首先…

前端Vue项目中腾讯地图SDK集成:经纬度与地址信息解析的实践

在前端开发中&#xff0c;我们经常需要将经纬度信息转化为具体的地址信息&#xff0c;这对于定位、地图展示等功能至关重要。Vue作为现代前端框架的代表&#xff0c;其组件化开发的特性使得我们能够更高效地实现这一功能。本文将介绍如何在Vue项目中集成腾讯地图SDK&#xff0c…

vue3 + antd vue 纯前端 基于xlsx 实现导入excel 转 json,将json数据转换XLSX并下载(下载模版)

一、导入 0、关键代码 // 安装插件 npm i xlsx/yarn add xlsx // 导入xlsx import * as XLSX from xlsx; 点击提交的时候才整理数据。上传的时候文件保存在 state.form.file[0] 中的 // 定义字段映射关系 const fieldMap {sheet2json: {技能名称: skill_name,技能等级: …

【中项】系统集成项目管理工程师-第2章 信息技术发展-2.2新一代信息技术及应用-2.2.1物联网与2.2.2云计算

前言&#xff1a;系统集成项目管理工程师专业&#xff0c;现分享一些教材知识点。觉得文章还不错的喜欢点赞收藏的同时帮忙点点关注。 软考同样是国家人社部和工信部组织的国家级考试&#xff0c;全称为“全国计算机与软件专业技术资格&#xff08;水平&#xff09;考试”&…

iPhone手机上备忘录怎么设置字数显示

在日常生活和工作中&#xff0c;我经常会使用iPhone的备忘录功能来记录一些重要的想法、待办事项或临时笔记。备忘录的便捷性让我可以随时捕捉灵感&#xff0c;但有时候&#xff0c;我也会苦恼于不知道自己记录了多少内容&#xff0c;尤其是在需要控制字数的时候。 想象一下&a…

mysql的B+树索引结构介绍

一、B树 特性&#xff1a; 所有的叶子结点中包含了全部关键字的信息&#xff0c;非叶子节点只存储键值信息&#xff0c;及指向含有这些关键字记录的指针&#xff0c;且叶子结点本身依关键字的大小自小而大的顺序链接&#xff0c;所有的非终端结点可以看成是索引部分&#xff0…

达梦数据库 MPP集群搭建(带主备)

MPP集群搭建&#xff08;带主备&#xff09; 1.背景2.操作内容和要求3. 具体步骤3.1 搭建过程3.1.1 集群搭建3.1.2 准备工作3.1.2.1 初始化3.1.2.2 备份数据库 3.1.3 配置主库EP013.1.3.1 配置dm.ini3.1.3.2 配置dmmal.ini3.1.3.3 配置dmarch.ini3.1.3.4 配置dmmpp.ctl3.1.3.5 …

Linux NFS服务搭建及使用

一、NFS 服务器介绍 nfs &#xff08; Network File System &#xff09;即网络文件系统&#xff0c;其基于 UDP/IP使用 nfs 能够在不同计算机之间通过网络进行文件共享&#xff0c;能使使用者访问网络上其它计算机中的文件就像在访问自己的计算机一样。 二、NFS 服务器的特点 …

【Java】用队列实现栈 力扣

文章目录 题目链接题目描述思路代码 题目链接 225.用队列实现栈 题目描述 思路 一个队列在模拟栈弹出元素的时候只要将队列头部的元素&#xff08;除了最后一个元素外&#xff09; 重新添加到队列尾部&#xff0c;此时再去弹出元素就是栈的顺序了。 代码 class MyStack {Q…

C++那些事之依赖注入

C那些事之依赖注入 最近星球里面有个小伙伴让更新一下依赖注入&#xff0c;于是写出了这篇文章&#xff0c;来从实际的例子讲解&#xff0c;本文会讲解一些原理与实现&#xff0c;完整的实现代码懒人版放在星球中&#xff0c;我们开始正文。 大纲&#xff1a; 直接依赖接口依赖…

什么是长效住宅IP?

长效住宅IP的定义 长效住宅IP&#xff0c;简而言之&#xff0c;是指长期稳定、非动态更换的住宅网络IP地址。这类IP地址通常由互联网服务提供商&#xff08;ISP&#xff09;分配给居民家庭用户&#xff0c;用于上网、网络通信等日常网络活动。与传统的动态IP相比&#xff0c;长…

​前端Vue组件技术实践:打造自定义精美悬浮菜单按钮组件

随着前端技术的迅猛发展&#xff0c;复杂的应用场景和不断迭代的产品需求使得开发的复杂度日益提升。传统的整体式开发方式已经难以满足现代前端应用的灵活性和可维护性需求。在这样的背景下&#xff0c;组件化开发逐渐崭露头角&#xff0c;成为解决复杂前端应用问题的有效手段…

算法第十一天:leetcode707.设计链表

一、设计链表的题目描述与链接 707.设计链表的链接如下表所示&#xff0c;您可直接复制下面网址进入力扣学习&#xff0c;在观看下面的内容之前一定要先做一遍哦&#xff0c;这样才能印象深刻&#xff01; https://leetcode.cn/problems/design-linked-list/https://leetcode.…