canvas画布签名画笔偏移

最新推荐文章于 2024-06-21 16:41:46 发布

C J

最新推荐文章于 2024-06-21 16:41:46 发布

阅读量275

点赞数 4

文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_63586335/article/details/137184051

版权

//错误代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>签名</title>
    <style>
        #cvs {
          
            box-shadow: 0 0 10px #aaa;
            width: 500px;
            height: 300px;

        }
    </style>
</head>

<body>
    <div class="content">
        <canvas id="cvs">
            您的浏览器不支持Canvas,请升级浏览器
        </canvas>
        <p>
            <button class="submit">提交签名</button>
            <button class="clear">清空签名</button>
        </p>
    </div>

</body>
<script>
  // 此处使用$替换document.querySelector  做一个简写
    function $(select) {
        return document.querySelector(select)
    }
    let cvs = $('#cvs')  // 获取canvas对象
    let ctx = cvs.getContext('2d') // 获取画笔工具对象
    ctx.color = '#000'
    ctx.lineCap = 'round'
    ctx.lineJoin = 'round'
    // 鼠标点击
    cvs.onmousedown = e => {
        console.log(cvs.offsetLeft);
        let cvsRect = cvs.getBoundingClientRect();
        ctx.beginPath()  // 开始
        ctx.moveTo(e.clientX - cvs.offsetLeft, e.clientY - cvs.offsetTop)  //将画笔起点设置为当前位置
        // 鼠标移动
        cvs.onmousemove = ev => {
            let cvsRect = cvs.getBoundingClientRect();
            ctx.lineTo(ev.clientX - cvs.offsetLeft, ev.clientY - cvs.offsetTop)  //画笔跟着鼠标绘制线条 
            ctx.strokeStyle = "#f00"  // 上色
            ctx.stroke()
        }
    }

    // 鼠标松开
    cvs.onmouseup = () => cvs.onmousemove = null

    // 清空
    $('.clear').onclick = () => ctx.clearRect(0, 0, cvs.width, cvs.height)

</script>

</html>

canvas踩坑经历

canvas的绘制是以画布大小为准，我在CSS中设置的宽高实际上没有改变canvas的宽高，导致画笔偏移。

例如：用css设置的width为450，height为300，对应默认的画布大小300×150，宽高比例分别为1.5和2，所以我们设置的矩形的宽（100px）高（100px）实现显示的会是宽：100px×1.5=150px；高：100px×2=200px； Canvas的默认画布大小为300*150

再次提醒不可以在css中直接修改尺寸

正确修改方式例如设置宽度1000 高度800

     let cvs = $('#cvs')  
    cvs.width='1000'                  //注意没有单位
    cvs.height='800'                 //注意没有单位
    let ctx = cvs.getContext('2d') 
    ctx.color = '#000'
    ctx.lineCap = 'round'
    ctx.lineJoin = 'round'

下面是完整签名代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>签名</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
        }

        * {
            margin: 0;
            padding: 0;
        }

        #cvs {
            width: 1000px;
            height: 800px;
            box-shadow: 0 0 10px #aaa;


        }
    </style>
</head>

<body>
    <div class="content">
        <canvas id="cvs">
            您的浏览器不支持Canvas,请升级浏览器
        </canvas>
        <p>
            <button class="submit">提交签名</button>
            <button class="clear">清空签名</button>
        </p>
    </div>

</body>
<script>
    // 此处使用$替换document.querySelector  做一个简写
    function $(select) {
        return document.querySelector(select)
    }
    let cvs = $('#cvs')  // 获取canvas对象
    cvs.width='1000'
    cvs.height='800'
    let ctx = cvs.getContext('2d') // 获取画笔工具对象
    ctx.color = '#000'
    ctx.lineCap = 'round'
    ctx.lineJoin = 'round'
    // 鼠标点击
    cvs.onmousedown = e => {
        console.log(cvs.offsetLeft);
        let cvsRect = cvs.getBoundingClientRect();
        ctx.beginPath()  // 开始
        ctx.moveTo(e.clientX - cvs.offsetLeft, e.clientY - cvs.offsetTop)  //将画笔起点设置为当前位置
        // 鼠标移动
        cvs.onmousemove = ev => {
            let cvsRect = cvs.getBoundingClientRect();
            ctx.lineTo(ev.clientX - cvs.offsetLeft, ev.clientY - cvs.offsetTop)  //画笔跟着鼠标绘制线条 
            ctx.strokeStyle = "#f00"  // 上色
            ctx.stroke()
        }
    }

    // 鼠标松开
    cvs.onmouseup = () => cvs.onmousemove = null

    // 清空
    $('.clear').onclick = () => ctx.clearRect(0, 0, cvs.width, cvs.height)

</script>

</html>