canvas 实现画板（三）（保留之前画的矩阵）(2021/5/11)

布满荆棘的人生 2023-01-20 08:16 4阅读 0赞

*  实现思路：把所有的画面内容保存起来，然后清除页面，再重新描绘

<!DOCTYPE html>
    <html lang="en">
    
    <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>canvas 实现画板</title>
            <style>
                    * { 
                            margin: 0;
                            padding: 0;
                            box-sizing: border-box;
                    }
    
                    body { 
                            width: 100vw;
                            height: 100vh;
                            display: flex;
                            flex-direction: column;
                            justify-items: flex-start;
                    }
    
                    .caidan { 
                            height: 100px;
                            width: 100vw;
                            display: flex;
                            border-bottom: 3px solid #ccc;
                            justify-content: space-around;
                            align-items: center;
                    }
    
                    #canvas { 
                            flex: 1;
                            width: 100vw;
                    }
    
                    .btn { 
                            width: 150px;
                            height: 50px;
                            border: 1px solid #CCC;
                            border-radius: 20px;
                            text-align: center;
                            line-height: 50px;
                            color: #ccc;
                    }
    
                    .btn.active { 
                            box-shadow: 0 0 20px deepskyblue;
                            border: 1px solid deepskyblue;
                    }
            </style>
    </head>
    
    <body>
            <div class="caidan">
                    <div class="btn" id="huabi">画笔</div>
                    <div class="btn" id="rect">矩形</div>
                    <div class="btn">圆形</div>
                    <div class="btn">线段粗细</div>
                    <div class="btn">画笔颜色</div>
            </div>
            <canvas id="canvas"></canvas>
            
            <script>
                    var allBtn = document.querySelectorAll('.btn')
                    var canvas = document.querySelector('#canvas')
                    var ctx = canvas.getContext('2d')
                    canvas.setAttribute('width', canvas.offsetWidth)
                    canvas.setAttribute('height', canvas.offsetHeight)
                    var huaban = { 
                            type: 'none',
                            isDraw: false,
                            beginX: 0, //矩形描绘的开始位置
                            beginY: 0,
                            imageData:null, //用于保存之前画板的内容
                            huabiFn: function (e) { 
                                    ctx.beginPath()
                                    var x = e.pageX - canvas.offsetLeft
                                    var y = e.pageY - canvas.offsetTop
                                    ctx.arc(x, y, 3, 0, 2 * Math.PI)
                                    ctx.fill()
                                    ctx.closePath()
                            },
                            rectFn: function (e) { 
                                    ctx.beginPath()
                                    var x = e.pageX - canvas.offsetLeft
                                    var y = e.pageY - canvas.offsetTop
                                    ctx.clearRect(0, 0, canvas.offsetWidth, canvas.offsetHeight) //每一次清除画板的矩形
                                    // 一开始是空的
                                    if(huaban.imageData != null){ 
                                            ctx.putImageData(huaban.imageData,0,0,0,0,canvas.offsetWidth, canvas.offsetHeight); //参数：内容、位置、数据位置、宽高 //释放存储的页面内容
                                    }
                                    ctx.rect(huaban.beginX, huaban.beginY, x - huaban.beginX, y - huaban.beginY)
                                    ctx.stroke()
                                    ctx.closePath()
                            }
                    }
    
                    var huabiBtn = document.querySelector('#huabi')
                    huabiBtn.onclick = function () { 
                            allBtn.forEach((item, index) => { 
                                    item.classList.remove('active')
                            })
                            huabiBtn.classList.add('active')
                            huaban.type = 'huabi'
                    }
    
                    // 监听鼠标按下事件
                    canvas.onmousedown = function (e) { 
                            huaban.isDraw = true
                            if (huaban.type == 'rect') { 
                                    var x = e.pageX - canvas.offsetLeft
                                    var y = e.pageY - canvas.offsetTop
                                    huaban.beginX = x;
                                    huaban.beginY = y;
                            }
                    }
                    // 监听鼠标抬起事件
                    canvas.onmouseup = function () { 
                            huaban.isDraw = false
                            huaban.imageData = ctx.getImageData(0,0,canvas.offsetWidth,canvas.offsetHeight) //保存之前画板描绘的内容
    
                    }
    
                    canvas.onmousemove = function (e) { 
                            if (huaban.isDraw) {  //调用不同的函数执行按钮时间
                                    huaban[huaban.type + 'Fn'](e)//调用对象里的函数
                            }
                    }
    
    
                    var rectBtn = document.querySelector('#rect')
                    rectBtn.onclick = function () { 
                            allBtn.forEach((item, index) => { 
                                    item.classList.remove('active')
                            })
                            rectBtn.classList.add('active')
                            huaban.type = 'rect'
                    }
    
            </script>
    </body>
    
    </html>