使用canvas做了一个最简单的网页版画板，5分钟学会

向右看齐 2024-02-21 11:54 20阅读 0赞

画板实现的效果：可以切换画笔的粗细，颜色，还可以使用橡皮擦，还可以清除画布，然后将画的内容保存下载成一张图片：![f7c99b677c4844df825336a6325017a2.png][]

具体用到的canvas功能有：画笔的粗细调整lineWidth，开始一个新的画笔路径beginPath，结束一个画笔路径closePath，这个可以保证不影响之前画的效果，重新开始一个画笔路径。 还有橡皮擦使用的ctx.globalCompositeOperation = 'destination-out'属性，清空画布使用的：ctx.clearRect(0, 0, canvas.width, canvas.height)，保存图片使用的是let url = canvas.toDataURL('image/png')。

完整的代码如下：

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title>像素操作</title>
            <style>
                .active {
                    background-color: #f2a1a1;
                }
            </style>
        </head>
        <body>
            <div>创建一个画布，可以使用画笔随意画画</div>
            <div style="width: 800px; margin-top: 6px">
                <button class="bold">粗线条</button>
                <button class="thin">细线条</button>
                <input id="color" type="color" />
                <button class="del">橡皮擦</button>
                <button class="clear">清空画布</button>
                <button class="save">保存图片</button>
                <hr />
                <canvas id="myCanvas" width="800" height="600"></canvas>
            </div>
            <script>
                // 获取画布
                const canvas = document.getElementById('myCanvas')
                // 获取画笔
                const ctx = canvas.getContext('2d')
                // 让画笔的拐弯处更加圆润，没有锯齿感
                ctx.lineCap = 'round'
                ctx.lineJoin = 'round'
                // 获取控制按钮
                const bold = document.querySelector('.bold')
                const thin = document.querySelector('.thin')
                const color = document.querySelector('#color')
                const del = document.querySelector('.del')
                const clear = document.querySelector('.clear')
                const save = document.querySelector('.save')
                // 添加点击事件
                bold.onclick = function () {
                    ctx.lineWidth = 20
                    bold.classList.add('active')
                    thin.classList.remove('active')
                    del.classList.remove('active')
                    clear.classList.remove('active')
                    save.classList.remove('active')
                }
                thin.onclick = function () {
                    ctx.lineWidth = 5
                    thin.classList.add('active')
                    bold.classList.remove('active')
                    del.classList.remove('active')
                    clear.classList.remove('active')
                    save.classList.remove('active')
                }
                color.onchange = function (e) {
                    console.log('颜色改变了:', e.target.value)
                    ctx.strokeStyle = e.target.value
                }
                del.onclick = function () {
                    console.log('橡皮擦')
                    ctx.globalCompositeOperation = 'destination-out'
                    ctx.lineWidth = 30
                    del.classList.add('active')
                    bold.classList.remove('active')
                    thin.classList.remove('active')
                    clear.classList.remove('active')
                    save.classList.remove('active')
                }
    
                clear.onclick = function () {
                    console.log('清空画布')
                    ctx.clearRect(0, 0, canvas.width, canvas.height)
                }
                // 保存图片
                save.onclick = function () {
                    console.log('保存图片')
                    let url = canvas.toDataURL('image/png')
                    let a = document.createElement('a')
                    a.href = url
                    a.download = 'canvas.png'
                    a.click()
                }
    
                // 监听画布画画事件
                let mouseDown = false
    
                // 鼠标按下将变量设置为true
                canvas.onmousedown = function (e) {
                    ctx.beginPath()
                    mouseDown = true
                    ctx.moveTo(e.offsetX, e.offsetY)
                }
    
                // 鼠标抬起将变量设置为false
                canvas.onmouseup = function () {
                    mouseDown = false
                    ctx.closePath()
                    ctx.globalCompositeOperation = 'source-over'
                }
    
                canvas.onmouseleave = function () {
                    mouseDown = false
                    ctx.closePath()
                }
    
                // 鼠标移动
                canvas.onmousemove = function (e) {
                    if (mouseDown) {
                        console.log('鼠标移动')
                        ctx.lineTo(e.offsetX, e.offsetY)
                        ctx.stroke()
                    }
                }
            </script>
        </body>
    </html>

[f7c99b677c4844df825336a6325017a2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/511601c11765402fba7f26fa916d6d94.png