点击HTML Canvas元素后如何向Node.js数据库发送数据？

是的，你可以用fetch结合POST方法实现前端（EJS页面）到Node.js后端的数据传输，这是前后端通信的常规方案。下面分两部分给出完整实现步骤：

一、修改前端EJS页面的点击逻辑 #

在你判断点击到圆形的代码块里，添加fetch请求，把需要发送的数据通过POST请求传给后端接口：

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<canvas id ="canvas" style="border: solid 5px blue;"></canvas>

<script>
    const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");
    canvas.width = 1000;
    canvas.height = 800;

    var circle = new Path2D();
    circle.arc(250, 75, 50, 0, 2 * Math.PI);
    ctx.fillStyle = "gray";
    circle.closePath(); // 补全方法执行括号，之前代码遗漏
    ctx.fill(circle);

    canvas.addEventListener('click', (event) => {
        var circle_1 = ctx.isPointInPath(circle, event.offsetX, event.offsetY);
        if (circle_1) {
            // 自定义要发送的数据，可根据需求修改
            const sendData = {
                circleId: "main_circle",
                clickPos: {x: event.offsetX, y: event.offsetY},
                trigger: "circle_click"
            };

            // 发送POST请求到后端接口
            fetch('/api/circle-click', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json', // 声明数据格式为JSON
                },
                body: JSON.stringify(sendData), // 将JS对象转为JSON字符串
            })
            .then(response => response.json())
            .then(data => {
                console.log('后端响应:', data);
                // 可在这里添加前端反馈逻辑，比如提示用户发送成功
            })
            .catch(error => {
                console.error('请求发送失败:', error);
            });
        }
    });
</script>
</body>
</html>

二、Node.js后端接收POST请求的示例 #

假设你用Express框架搭建后端，需要添加对应路由来接收这个POST请求：

const express = require('express');
const app = express();
const port = 3000;

// 解析JSON格式的请求体，必须配置才能接收前端传的JSON数据
app.use(express.json());

// 配置EJS模板引擎（已配置可忽略）
app.set('view engine', 'ejs');
app.set('views', './views'); // 你的EJS文件存放目录

// 渲染EJS页面的路由
app.get('/', (req, res) => {
    res.render('你的页面文件名'); // 比如EJS文件名为canvas.ejs，就写'canvas'
});

// 接收圆形点击数据的POST路由
app.post('/api/circle-click', (req, res) => {
    // req.body即为前端传来的数据
    const receivedData = req.body;
    console.log('收到前端数据:', receivedData);

    // 这里可添加业务逻辑，比如存入数据库、处理计算等

    // 返回响应给前端
    res.json({
        status: 'success',
        msg: '数据已接收',
        received: receivedData
    });
});

app.listen(port, () => {
    console.log(`服务器运行在http://localhost:${port}`);
});

关键注意点 #

• 前端必须设置Content-Type: application/json，同时将数据转为JSON字符串，后端才能正确解析。
• 后端一定要配置express.json()中间件，否则req.body会是undefined。
• 可根据实际需求调整发送的数据内容和后端的业务逻辑。

内容的提问来源于stack exchange，提问作者Stefan