在h5中用canvas实现网页画笔功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body style="margin-left:200px;">
    <canvas id="display" height="600" width="600" style="background-color: bisque;"></canvas>
    <script>
        class Track {
            constructor(){
                this.content = []
            }
            getTrack(){
                return this.content
            }
            clearTrack(){
                this.content = []
            }
            pushItem(item){
                this.content.push(item)
            }
            getNewestItem(){
                return this.content.length!==0?this.content[this.content.length-1]:null
            }
        }
        class Drawpaper {
            constructor(){
                this.el = document.createElement("canvas")
            }
        }
        let cav = document.getElementById('display')
        console.log(cav)
        let context_2d = cav.getContext("2d");
        let track = new Track
        let defaultPenconf = {
            size:9,
            color:'black',
            bgcolor:'black'
        }
        let canvasconf = {
            height:600,
            width:600,
            bgcolor:'black'
        }
        setConfig (context_2d,defaultPenconf)
        function setConfig (ctx,penconf) {
            ctx.lineJoin="round";
            ctx.lineCap="round";
            ctx.strokeStyle=penconf.color;
            ctx.fillStyle=penconf.bgcolor;
            ctx.lineWidth=penconf.size;
        }
        function initListener (cav) {
            cav.addEventListener('mousemove',penmove)
            document.addEventListener('mouseup',penup)
            cav.addEventListener('mouseleave',penleave)
        }
        function clearListener (cav) {
            cav.removeEventListener('mousemove',penmove)
            document.removeEventListener('mouseup',penup)
            cav.removeEventListener('mouseleave',penleave)
        }
        function pendown (e) {
            if(e.button!==0){
                return
            }
            console.log(1)
            let mousePosition = {x:e.offsetX,y:e.offsetY}
            drawRound (context_2d,mousePosition)
            track.pushItem(mousePosition)
            initListener (cav)
        }
        function penmove(e) {
            console.log(2)
            let mousePosition = {x:e.offsetX,y:e.offsetY}
            draw (context_2d,mousePosition)
            track.pushItem (mousePosition)
        }
        
        function penup (e) {
            console.log(3)
            clearListener (cav)
            track.clearTrack ()
        }

        cav.addEventListener('mousedown',pendown)
        function penleave (e) {
            let mousePosition = {x:e.offsetX,y:e.offsetY}
            draw (context_2d,mousePosition)
            clearListener (cav)
            track.clearTrack ()
        }
        function drawRound (cavctx,position={}) {
            let {x=0,y=0} = position
            cavctx.beginPath();
            let {size} = defaultPenconf
            let r = size/2
            cavctx.arc(x,y,r,0,2*Math.PI)
            cavctx.closePath();
            cavctx.fill();
        }
        function draw (cavctx,position={}) {//画布对象，位置，笔刷设置
            let {x=0,y=0} = position
            let prevPosition = track.getNewestItem()
            cavctx.beginPath();
            cavctx.moveTo(prevPosition.x,prevPosition.y)
            cavctx.lineTo(x,y);
            cavctx.closePath();
            cavctx.stroke();
        }
    </script>
</body>
</html>
原文链接：https://blog.csdn.net/weixin_51364599/article/details/108950462