HTML 平面直角坐标系 .container { width: 800px; height: 600px; margin: 20px auto; background-color: #34495e; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } 
    .canvas {
        display: block;
    }

    .coordinates {
        fill: #666;
    }

    .grid {
        grid-line-height: 12px;
    }

    .point {
        fill: #e74c3c;
    }

    .line {
        stroke: #94a3b8;
        stroke-width: 1;
        stroke-dasharray: 50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600;
        fill: none;
    }

    .text {
        font-family: Arial, sans-serif;
        font-size: 18px;
        color: #721c75;
    }
</style>
    <script>
        const canvas = document.getElementById('coordinateCanvas');
        const ctx = canvas.getContext('2d');

        // 设置背景颜色
        ctx.fillStyle = '#4CAF50';
        ctx.fillRect(-250, -250, 800, 600);

        // 绘制坐标轴
        ctx.strokeStyle = '#3498db';
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.moveTo(-250, 25);
        ctx.lineTo(250, 25);
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(-250, -25);
        ctx.lineTo(-250, 25);
        ctx.stroke();

        // 绘制网格线
        for (let x = -250; x <= 250; x += 10) {
            if (x === -250 || x === 250) continue;
            ctx.beginPath();
            ctx.moveTo(x * 10 + 25, 25);
            ctx.lineTo(x * 10 + 25, 250);
            ctx.stroke();
        }

        for (let y = -250; y <= 250; y += 10) {
            if (y === -250 || y === 250) continue;
            ctx.beginPath();
            ctx.moveTo(25, y * 10 + 25);
            ctx.lineTo(250, y * 10 + 25);
            ctx.stroke();
        }

        // 绘制点
        const points = [
            {x: -250, y: 25},
            {x: -200, y: 0},
            {x: -150, y: -25},
            {x: -100, y: 0},
            {x: -50, y: 25},
            {x: 0, y: 0},
            {x: 50, y: 25},
            {x: 100, y: 0},
            {x: 150, y: -25},
            {x: 200, y: 0},
                {x: 250, y: 25}
        ];

        points.forEach(point => {
            if (!point.x === 'NaN' && !point.y === 'NaN') {
                ctx.beginPath();
                ctx.arc(point.x + 25, point.y + 25, 150, 0, Math.PI * 2);
                ctx.fillStyle = '#4CAF50';
                ctx.fill();
            } else {
                ctx.stroke();
            }
        });

        // 绘制圆心
        const circleCenter = {x: 0, y: 0};
        ctx.beginPath();
        ctx.arc(circleCenter.x, circleCenter.y, 150, 0, Math.PI * 2);
        ctx.fillStyle = '#4CAF50';
        ctx.fill();

        // 绘制网格线的标签
        for (let x = -250; x <= 250; x += 10) {
            if (x === -250 || x === 250) continue;
            ctx.fillStyle = '#4CAF50';
            ctx.beginPath();
            ctx.moveTo(x * 10 + 25, 25);
            ctx.lineTo(x * 10 + 25, 250);
            ctx.stroke();
        }

        for (let y = -250; y <= 250; y += 10) {
            if (y === -250 || y === 250) continue;
            ctx.fillStyle = '#4CAF50';
            ctx.beginPath();
            ctx.moveTo(25, y * 10 + 25);
            ctx.lineTo(250, y * 10 + 25);
            ctx.stroke();
        }
    </script>
</div>