首页 > 其他分享 >20行js代码实现手写签名

20行js代码实现手写签名

时间:2022-10-01 23:56:03浏览次数:59  
标签:canvas 20 鼠标 ctx cvs js 手写 isDrawing 绘制

该功能主要通过监听鼠标事件来在canvas上绘制

   const cvs = document.getElementById("cvs");//获取canvas节点
    const ctx = cvs.getContext("2d");
    let isDrawing = false;//标记是否处于绘制状态
    cvs.addEventListener("mousedown", e => {//鼠标按下时开始绘制,并将画笔移动到鼠标按下位置
        isDrawing = true;
        ctx.moveTo(e.pageX, e.pageY)
    })
    cvs.addEventListener("mousemove", e => {//鼠标移动时,绘制移动路径
        if (isDrawing) {
            ctx.lineTo(e.pageX, e.pageY);
            ctx.stroke()
        }
    })
    cvs.addEventListener("mouseup", e => {//松开鼠标后,取消绘制状态
        isDrawing = false;
    })

    function Clear() {//重置canvas宽高来进行清除绘制内容
        cvs.width = cvs.width;
        cvs.height = cvs.height;
    }

 

标签:canvas,20,鼠标,ctx,cvs,js,手写,isDrawing,绘制
From: https://www.cnblogs.com/wen-web/p/16748027.html

相关文章

  • 工作感受月记202210月
    2022年10月01号国庆长假值下午班。2点至11点。今天平安度过,可惜的是,休息的七天长假并不是我期待的那样啊!对于这次的7天长假,我很失望。今天做什么事情都是毛躁的。。。......
  • RxJS 系列 – Join Creation Operators
    前言我们一样从简单和常用的入手.第一篇介绍了 CreationOperators上一篇介绍了FilterOperators 这一篇来到 JoinCreationOperators. 参考Docs–JoinCre......
  • 2022-2023-1 20221318 《计算机基础和程序设计》第五周学习总结
    作业信息这个作业属于那个班级https://edu.cnblogs.com/campus/besti/2022-2023-1-CFAP作业要求https://www.cnblogs.com/rocedu/p/9577842.html#WEEK03作业目标学习......
  • 2016 ZCTF note3:一种新解法
    2016ZCTFnote3:一种新解法最近在学习unlink做到了这道题,网上有两种做法:一种是利用edit功能读入id时整数溢出使索引为-1,一种是设置块大小为0使得写入时利用整数溢出漏洞可......
  • 2022 牛客多校题解
    2022牛客多校题解Contest1JContest2JContest3HHack(SAM)枚举B中的右端点,查询最长在A串中向右可以延伸多长。考虑对A串建立一个SAM,然后对于B串从左到右跑SAM的D......
  • react——webpack配置@路径——配置jsconfig.json提示
    利用addWebpackAlias配置路径constpath=require('path')const{addDecoratorsLegacy,override,addWebpackAlias}=require('customize-cra')//追加上一个装饰器mod......
  • [NOIP2011 提高组] Mayan 游戏
    DescriptionlinkSolution令当当前棋盘为\(a\)。注意到\(n\leq5\)且棋盘是\(5\times7\)的,所以直接爆搜可以做到\(O(35^5)=O(52521875)\),然而这里还有很大的常数......
  • 【闲话】2022.10.01
    今天早上下雨充分证明了\(\texttt{雨假同期命题}\)的正确性但是国庆没有放假老天爷:玩我呢早上:\(\textsf{bikuhiku}\):完蛋,早上没外套,我再拿一件吧早操前:\(\texts......
  • The 2022 ICPC Asia Regionals Online Contest (II)部分题解
    ......
  • 贤鱼的刷题日常-【c++】P7909 [CSP-J 2021] 分糖果
    ✅创作者:贤鱼⏰预计时间:15分钟@​​TOC​​题目题目背景红太阳幼儿园的小朋友们开始分糖果啦!题目描述红太阳幼儿园有n个小朋友,你是其中之一。保证n≥2。有一天你在幼儿园......