用canvas实现在线画板,带你找回童年乐趣

最新推荐文章于 2024-03-20 11:41:12 发布

前端不是渣男

最新推荐文章于 2024-03-20 11:41:12 发布

阅读量707

点赞数 2

文章标签：前端 canva可画

本文链接：https://blog.csdn.net/qq_63204040/article/details/131703595

版权

项目起步

实现功能

完整代码

效果图如下

项目总计6大功能

项目起步

首先准备好项目所用到的元素

 <canvas id="c1" width="1000" height="400"></canvas>
    <hr>
    <button id="strong">粗线条</button>
    <button id="thin">细线条</button>
    <button id="save">保存签名</button>
    <input type="color" id="color" value="">
    <button id="clearBtn">橡皮擦</button>
    <button id="null">清空画布</button>

/** 
         * @type {HTMLCanvasElement}
         */

        const c1 = document.querySelector('#c1')
        const ctx = c1.getContext('2d')

        let isDraw = false
        let lineWidth = 10
        //连接处圆润
        ctx.lineJoin = 'round'
        //开头和结尾圆润
        ctx.lineCap = 'round'
        c1.onmousedown = function () {
            ctx.beginPath()
            let x = event.pageX
            let y = event.pageY
            ctx.moveTo(x, y)
            isDraw = true
        }
        c1.onmouseup = function () {
            isDraw = false
            ctx.closePath()
        }
        c1.onmouseleave = function () {
            isDraw = false
            ctx.closePath()
        }
        c1.onmousemove = function () {
            if (isDraw) {
                let x = event.pageX
                let y = event.pageY
                ctx.lineTo(x, y)
                ctx.lineWidth = lineWidth
                ctx.stroke()
            }
        }

通过监听鼠标事件，我们可以在canvas元素中绘制出我们想要的效果

实现功能

1.线段的粗细

改变的是线条的粗细，根据 lineWidth调整即可

2.橡皮擦功能

当我们再擦除的时候，其实是利用的是合成属性,让合成的部分隐藏起来

注意擦除后，我们再绘制的时候需要让元素显示出来需要设置source-over

  ctx.globalCompositeOperation = 'destination-out'

3.清除画布

利用clearRect 即可清除想要清除的画布区域

ctx.clearRect(0,0, 1000, 400)

4.颜色改变

我们读取取色器的value然后赋值给strokeStyle即可

  ctx.strokeStyle = color.value

5.保存签名

这一步我们可以将画好的画布下载下来

利用画布的toDataURL属性,将其转化成一个url, 接着让一个a标签的href指向其，添加download属性即可

const imgUrl = c1.toDataURL()

            let a = document.createElement('a')
            a.setAttribute('download', '酷炫前面')
            a.href = imgUrl
            a.click()

一起来看看最终效果

完整代码

<!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>
        .active {
            border: 1px solid #ffcccc;
            background-color: #ffcccc;
            color: white;
        }
    </style>
</head>

<body>
    <canvas id="c1" width="1000" height="400"></canvas>
    <hr>
    <button id="strong">粗线条</button>
    <button id="thin">细线条</button>
    <button id="save">保存签名</button>
    <input type="color" id="color" value="">
    <button id="clearBtn">橡皮擦</button>
    <button id="null">清空画布</button>

    <script>

        /** 
         * @type {HTMLCanvasElement}
         */

        const c1 = document.querySelector('#c1')
        const ctx = c1.getContext('2d')

        let isDraw = false
        let lineWidth = 10
        //连接处圆润
        ctx.lineJoin = 'round'
        //开头和结尾圆润
        ctx.lineCap = 'round'
        c1.onmousedown = function () {
            ctx.beginPath()
            let x = event.pageX
            let y = event.pageY
            ctx.moveTo(x, y)
            isDraw = true
        }
        c1.onmouseup = function () {
            isDraw = false
            ctx.closePath()
        }
        c1.onmouseleave = function () {
            isDraw = false
            ctx.closePath()
        }
        c1.onmousemove = function () {
            if (isDraw) {
                let x = event.pageX
                let y = event.pageY
                ctx.lineTo(x, y)
                ctx.lineWidth = lineWidth
                ctx.stroke()
            }
        }


        const strong = document.querySelector('#strong')

        strong.onclick = function () {
            ctx.globalCompositeOperation = 'source-over'
            strong.classList.add('active')
            thin.classList.remove('active')
            clearBtn.classList.remove('active')
            lineWidth = 20
        }
        const thin = document.querySelector('#thin')

        thin.onclick = function () {
            ctx.globalCompositeOperation = 'source-over'
            thin.classList.add('active')
            strong.classList.remove('active')
            clearBtn.classList.remove('active')
            lineWidth = 2
        }
        const save = document.querySelector('#save')

        //保存图片
        save.onclick = function () {
            const imgUrl = c1.toDataURL()

            let a = document.createElement('a')
            a.setAttribute('download', '酷炫前面')
            a.href = imgUrl
            a.click()

        }


        const color = document.querySelector('#color')

        color.onchange = function () {
            ctx.strokeStyle = color.value
        }

        const clearBtn = document.querySelector('#clearBtn')

        clearBtn.onclick = function () {
            clearBtn.classList.add('active')
            thin.classList.remove('active')
            strong.classList.remove('active')
            ctx.globalCompositeOperation = 'destination-out'

            lineWidth = 50
        }

        const nullCanvas = document.querySelector('#null')

        nullCanvas.onclick = function () {
            ctx.clearRect(0, 0, 1000, 400)
        }
    </script>
</body>

</html>