canvas签名支持PC与移动

最新推荐文章于 2024-05-15 17:26:39 发布
汪洋gege
最新推荐文章于 2024-05-15 17:26:39 发布
阅读量168
点赞数
文章标签： javascript 前端 html5
本文链接：https://blog.csdn.net/weixin_53058848/article/details/128444537
版权
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv=X-UA-Compatible content=IE=edge>
        <meta name=viewport content=width=device-width, initial-scale=1.0>
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body>
        <canvas ></canvas>
        <div>
            <button onclick="cancel()">取消</button>
            <button onclick=save()>保存</button>
        </div>
    </body>
    <script>
        const config = {
            width: 400, // 宽度
            height: 200, // 高度
            lineWidth: 5, // 线宽
            strokeStyle: 'red', // 线条颜色
            lineCap: 'round', // 设置线条两端圆角
            lineJoin: 'round', // 线条交汇处圆角
        }
        
        // 获取canvas 实例
        const canvas = document.querySelector('canvas')
        
        // 设置宽高
        canvas.width = config.width
        canvas.height = config.height
        // 设置一个边框
        canvas.style.border = '1px solid #000'
        // 创建上下文
        const ctx = canvas.getContext('2d')
        // 画布填充色
        ctx.fillStyle='transparent'
        // 绘制填充矩形
        ctx.fillRect(
            0, // x 轴起始绘制位置
            0, // y 轴起始绘制位置
            config.width, // 宽度
            config.height // 高度
        );
        
        // 保存上次绘制的坐标及偏移量
        const client = {
            offsetX: 0, // 偏移量
            offsetY: 0,
            endX: 0, // 坐标
            endY: 0
        }
        
        // 兼容PC端与移动端
        const mobileStatus = (/Mobile|Android|iPhone/i.test(navigator.userAgent))
        // console.log(mobileStatus);
        
        
        // 监听鼠标按下/触摸开始的回调方法。
        const init = event => {
            // 获取移动偏移量及坐标
            const { offsetX, offsetY, pageX, pageY } = mobileStatus ? event.changedTouches[0] : event 
            
            //修改上次的偏移量及坐标
            client.offsetX = offsetX
            client.offsetY = offsetY
            client.endX = pageX
            client.endY = pageY
            
            // 清除上一次beginPath之后的所有路径,进行绘制
            ctx.beginPath()
            
            // 根据配置文件设置进行相应配置
            ctx.lineWidth = config.lineWidth
            ctx.strokeStyle = config.strokeStyle
            ctx.lineCap = config.lineCap
            ctx.lineJoin = config.lineJoin
            
            // 设置画线起始点位(上次的结束就是下次的开始)
            ctx.moveTo(client.endX, client.endY)
            
            // 监听鼠标移动或手势移动
            window.addEventListener(mobileStatus ? 'touchmove' : 'mousemove', draw)
        }
        
        // 监听鼠标移动/触摸移动的回调方法
        const draw = event => {
            console.log(event);
            // 获取当前坐标点位
            const {pageX,pageY}=mobileStatus?event.changeTouches[0]:event
            
            // 修改最后一次绘制的坐标点
            client.endX=pageX
            client.endY=pageY
            
            // 根据坐标点移动添加线条
            ctx.lineTo(pageX,pageY)
            
            // 绘制
            ctx.stroke()
        } 
        
        // 监听鼠标弹起/结束触摸的回调方法并移除鼠标移动/触摸移动的监听(结束绘制)
        const cloaseDraw = () => {
            // 结束绘制
            ctx.closePath()
            // 移除鼠标移动或手势移动监听器
            window.removeEventListener('mousemove',draw)
        }
        
        // 监听是按动鼠标还是触摸
        window.addEventListener(mobileStatus?'truchstart':'mousedown',init)
        
        // 创建鼠标/手势 弹起/离开 监听器
        window.addEventListener(mobileStatus ? 'touchend' :'mouseup', cloaseDraw)
        
        // 取消-清空画布
        const cancel = () => {
            // 清空当前画布上的所有绘制内容
            ctx.clearRect(0, 0, config.width, config.height)
        }
        
        
        // 保存-将画布内容保存为图片
        const save = () => {
            // 将canvas上的内容转成blob流
            canvas.toBlob(blob => {
                // 获取当前时间并转成字符串，用来当做文件名
                const date = Date.now().toString()
                // 创建一个 a 标签
                const a = document.createElement('a')
                // 设置 a 标签的下载文件名
                a.download = `${date}.png`
                // 设置 a 标签的跳转路径为 文件流地址
                a.href = URL.createObjectURL(blob)
                // 手动触发 a 标签的点击事件
                a.click()
                // 移除 a 标签
                a.remove()
            })
        }
    </script>
</html>