如何在同一页面内将值从 Js 传递到 PHP [重复]

Question

我有一个画布，我已经在那里画了我的圆圈（来自 MySQL DB 的中心和半径）。 此外，在某些情况下（来自 DB），圆圈会被填充为红色。

现在我必须这样做：

当用户点击红色圆圈时，我应该显示一个弹出窗口（我想是警报），其中包含从 MySQL 获取的数据

我已经能够使用 Javascript 定位用户单击的像素的坐标，并且我能够获取该像素的颜色。

我需要的是：

如果像素是红色的，我应该将该信息传递给 PHP（同一页面），然后我应该从 DB 中获取一些数据。

我在网上找到了很多功能，Ajax 或 JQuery，但我真的无法集成到我的 PHP...

我的相关代码如下：

//这个Js函数获取用户点击的像素的坐标和颜色

<script language="javascript">
    function getCursorPosition(canvas, event) {
        const rect = canvas.getBoundingClientRect();
        const x = event.clientX - rect.left;
        const y = event.clientY - rect.top;
        //console.log("x: " + x + " y: " + y);
        
        var ctx = canvas.getContext("2d");
        ctx.beginPath();
        
        var pixel = ctx.getImageData(x, y, 1, 1).data; 
        var hex = "#" + ("000000" + rgbToHex(pixel[0], pixel[1], pixel[2])).slice(-6);
        
        alert("x: " + x + " y: " + y + " hex: " + hex);
    }
</script>

...

//绘制画布并监听事件mousedown

<?php
    echo("<div id='text' style='text-align:center;'>");
    echo("<canvas id='myCanvas' width='400' height='600' style='border:1px solid #000000;'></canvas>");
?>
    <script>
        var canvas = document.getElementById('myCanvas'); 
        canvas.addEventListener("mousedown", function (e) { getCursorPosition(canvas, e);});
    </script>
<?php
    echo("</div>"); 
    

...

//循环从DB获取中心和半径并在画布上绘制圆

$sqltextval = "SELECT * FROM table WHERE col='somevalue'";
$connval = mysqli_query($id,$sqltextval);
if ($rowval = mysqli_fetch_object($connval))
{
    //fill circle in red
    echo("<script type='text/javascript'>");
    echo("fill_circle($X, $Y, $radius);");
    echo("</script>;");
} 
else
{
    //circle not filled in
    echo("<script type='text/javascript'>");
    echo("draw_circle($X, $Y, $radius);");
    echo("</script>;"); 
}

Answer 1

我建议你试试fetch

const componentToHex = c => {
  let hex = c.toString(16);
  return hex.length == 1 ? "0" + hex : hex
};
const rgbToHex = (r, g, b) => "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);


function getCursorPosition(canvas, event) {
  const rect = canvas.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;
  //console.log("x: " + x + " y: " + y);

  var ctx = canvas.getContext("2d");
  ctx.beginPath();

  var pixel = ctx.getImageData(x, y, 1, 1).data;
  var hex = "#" + ("000000" + rgbToHex(pixel[0], pixel[1], pixel[2])).slice(-6);

  return "x: " + x + " y: " + y + " hex: " + hex;
}

var canvas = document.getElementById('myCanvas');
canvas.addEventListener("mousedown", function(e) {
  const pos = getCursorPosition(canvas, e);
  console.log(pos); 
  // uncomment next line to send to server
  // fetch('server.php?' + new URLSearchParams({ pos: pos }))
});

<div id='text' style='text-align:center;'>
  <canvas id='myCanvas' width='400' height='600' style='border:1px solid #000000;'></canvas>
</div>