console 命令行工具 X clear
console
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas API封装示例</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="1920" height="200"></canvas>


    <script>
        function  isMouseOverHandle(mouseX, mouseY) {
            const dx = mouseX - handle.x;
            const dy = mouseY - handle.y;
            return Math.sqrt(dx * dx + dy * dy) <= handle.size;
        }
        const handle = {
            x: 100,
            y: 100,
            size: 20
        };

class CanvasAPI {
    dragging=false;
    

    constructor(canvasId,drawHandle) {
        // 获取 canvas 元素和其上下文
        const canvas = document.getElementById(canvasId);
        this.canvas=canvas;

        // 监听鼠标按下事件
        canvas.addEventListener('mousedown', (event) => {
            console.log(event,'event')
            const e=event.target;

            const mouseX = e.offsetX;
            const mouseY = e.offsetY;
            
            if (isMouseOverHandle(mouseX, mouseY)) {
                this.dragging = true;
                offsetX = mouseX - handle.x;
                // offsetY = mouseY - handle.y;
                canvas.style.cursor = 'e-resize';  // 改变鼠标样式为拖拽
            }
        });

        // 监听鼠标移动事件
        canvas.addEventListener('mousemove', (event) => {
            console.log(event,'event')
            const e=event.target;
            const mouseX = e.offsetX;
            const mouseY = e.offsetY;

            // 如果正在拖拽，更新手柄位置
            if (this.dragging) {
                handle.x = mouseX - offsetX;
                // handle.y = mouseY - offsetY;
                console.log("重新弄")
                drawHandle();  // 重新绘制手柄
            } else if (isMouseOverHandle(mouseX, mouseY)) {
                canvas.style.cursor = 'e-resize';  // 如果鼠标悬浮在手柄上，显示手型图标
            } else {
                canvas.style.cursor = 'default';  // 否则恢复为默认图标
            }
        });

        // 监听鼠标松开事件
        canvas.addEventListener('mouseup', () => {
            this.dragging = false;
            canvas.style.cursor = 'default';  // 松开后恢复默认鼠标图标
        });

        if (!this.canvas) {
            throw new Error(`Canvas with ID ${canvasId} not found.`);
        }
        this.ctx = this.canvas.getContext('2d');
    }

    // 设置绘制样式
    setStyle(options = {}) {
        const { lineWidth, strokeStyle, fillStyle, font, textAlign } = options;
        if (lineWidth) this.ctx.lineWidth = lineWidth;
        if (strokeStyle) this.ctx.strokeStyle = strokeStyle;
        if (fillStyle) this.ctx.fillStyle = fillStyle;
        if (font) this.ctx.font = font;
        if (textAlign) this.ctx.textAlign = textAlign;
    }

    // 绘制线条
    drawLine(x1, y1, x2, y2) {
        this.ctx.beginPath();
        this.ctx.moveTo(x1, y1);
        this.ctx.lineTo(x2, y2);
        this.ctx.stroke();
    }

    // 绘制矩形
    drawRect(x, y, width, height) {
        this.ctx.beginPath();
        this.ctx.rect(x, y, width, height);
        this.ctx.fill();
        this.ctx.stroke();
    }

    // 绘制圆形
    drawCircle(x, y, radius) {
        this.ctx.beginPath();
        this.ctx.arc(x, y, radius, 0, 2 * Math.PI);
        this.ctx.fill();
        this.ctx.stroke();
    }

    // 绘制文本
    drawText(text, x, y) {
        this.ctx.fillText(text, x, y);
    }

    // 清除画布
    clearCanvas() {
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }

    // 绘制图像
    drawImage(image, x, y, width, height) {
        this.ctx.drawImage(image, x, y, width, height);
    }

    // 绘制路径
    drawPath(path) {
        this.ctx.beginPath();
        path.forEach((point, index) => {
            if (index === 0) {
                this.ctx.moveTo(point.x, point.y);
            } else {
                this.ctx.lineTo(point.x, point.y);
            }
        });
        this.ctx.closePath();
        this.ctx.fill();
        this.ctx.stroke();
    }

    // 绘制渐变
    drawGradient(x1, y1, x2, y2) {
        const gradient = this.ctx.createLinearGradient(x1, y1, x2, y2);
        gradient.addColorStop(0, 'blue');
        gradient.addColorStop(1, 'red');
        this.ctx.fillStyle = gradient;
        this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
    }

    // 设置填充颜色
    setFillColor(color) {
        this.ctx.fillStyle = color;
    }

    // 设置描边颜色
    setStrokeColor(color) {
        this.ctx.strokeStyle = color;
    }

    // 设置字体样式
    setFont(font) {
        this.ctx.font = font;
    }
}


function draw(){
    

        // 设置样式
        canvas.setStyle({
            lineWidth: 3,
            strokeStyle: 'black',
            fillStyle: 'lightblue',
            font: '16px Arial',
            textAlign: 'center'
            
        });

        // 绘制一个矩形
        // canvas.drawRect(50, 50, 300, 100);

        
        canvas.setStyle({
            lineWidth: 1,
        });
        const kdcH=20;
        // 绘制一条线
        canvas.drawLine(0, 150, 1920, 150);
        for(let i=1;i<20;i++){        
            canvas.drawLine(i*100, 150-kdcH, i*100, 150);
        }
        
        canvas.setStyle({
            font: '12px Arial',
            lineWidth: 1,
            fillStyle: '#bbb'
        });

        for(let i=1;i<20;i++){        
            canvas.drawLine(i*100+50, 150 - kdcH/2, i*100+50, 150);
        }


        canvas.setStyle({
            font: '12px Arial',
            lineWidth: 1,
            fillStyle: '#00f'
        });

        for(let i=1;i<20;i++){        
            // 绘制文本
            canvas.drawText(i+':00', i*100, 170);
        }

        canvas.setStyle({
            font: '12px Arial',
            lineWidth: 1,
            strokeStyle: '#f00',
            fillStyle: '#f00'
        });

        canvas.drawLine(handle.x, 100, handle.x, 150);
}

const canvas = new CanvasAPI('myCanvas',draw);
draw();

    </script>
</body>
</html>