Início / coding / Perguntas / 76925959
Accepted
Stefan
Asked: 2023-08-18 09:37:25 +0800 CST

Como faço para enviar para o banco de dados node.js depois de clicar no elemento html canvas?

  • 772

Eu tenho um arquivo .ejs e adicionei uma tela. Como faço para enviar valores para nodejs quando clico no elemento de tela html chamado circle? Deve haver um método POST usado com busca?

<!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) {
//I want to send values from here
}

})
</script>

</body>
</html>
node.js

1 respostas

  1. Best Answer

    A única maneira de trocar dados de html para backend é usando um desses 02 métodos

    Como seu evento não é gerado de um formulário comum , você precisa de ajax. Então, no seu evento "onclick", coloque algo assim:

    Sem biblioteca externa

    var xmlhttp = new XMLHttpRequest();
var theUrl = "/some/express/router";
xmlhttp.open("POST", theUrl);
xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xmlhttp.send(JSON.stringify({"foo": "bar"}));

//source: https://stackoverflow.com/a/39519299/3957754

    Você tem outras opções para usar o ajax:

    Processo interno

    No exemplo anterior, /some/express/router refere-se a alguma rota em seu back-end.

    Antes de usar o ajax, você precisa desenvolver um endpoint http de back-end para receber dados e armazená-los em seu banco de dados favorito. Verificar :

    • 0

relate perguntas