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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绘图板</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <button onclick="setCanvasType('pen')">笔</button>
    <button onclick="setCanvasType('eraser')">橡皮擦</button>
    <button onclick="setColor('#ff0000')">红色</button>
    <button onclick="setCanvasType('circle')">圆形</button>
    <canvas id="canvas">您的浏览器不支持canvas</canvas>
    <script>
        window.onload = function () {
            let canvas = document.getElementById('canvas')
            canvas.height = window.innerHeight
            canvas.width = window.innerWidth
            let ctx = canvas.getContext('2d')
            let canvasType = 'pen'
            let draw = false
            let lastX, lastY
            window.addEventListener('mousemove', e => {
                if (draw) {
                    switch (canvasType) {
                        case 'pen':
                            penDraw(e.x, e.y)
                            break;
                        case 'circle':
                            // circleDraw(e.x, e.y)
                            break;
                        case 'eraser':
                            eraserDraw(e.x, e.y)
                            break;
                        default:
                            break;
                    }
                }
            })

            function penDraw(x, y) {
                ctx.lineTo(x, y)
                ctx.stroke()
            }

            function circleDraw(x, y) {
                let circleX, circleY, r
                circleX = Math.round(Math.abs(x + lastX) / 2)
                circleY = Math.round(Math.abs(y + lastY) / 2)

                //勾股定理
                r = Math.round(Math.sqrt(Math.pow(Math.abs(x - lastX), 2) + Math.pow(Math.abs(y - lastY), 2)) / 2)
                console.log(circleX, circleY, r)
                ctx.beginPath();
                ctx.arc(circleX, circleY, r, 0, Math.PI * 2, true);
                ctx.closePath();
                ctx.fill();
            }
            let a = 50

            function eraserDraw(x, y) {
                ctx.save()
                ctx.beginPath()
                ctx.arc(x, y, a, 0, 2 * Math.PI);
                ctx.clip()
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                ctx.restore();
            }
            canvas.addEventListener('mousedown', e => {
                ctx.moveTo(e.x, e.y)
                if (canvasType === 'circle') {
                    lastX = e.x
                    lastY = e.y
                }
                draw = true
            })
            canvas.addEventListener('mouseup', e => {
                draw = false
                if (canvasType == 'circle') {
                    circleDraw(e.x, e.y)
                    lastX = null
                    lastY = null
                }
            })
            setCanvasType = function (e) {
                canvasType = e
            }
            setColor = function (color) {
                if (canvasType !== 'pen') {
                    canvasType = 'pen'
                }
                ctx.strokeStyle = color
            }
        }
    </script>
</body>

</html>