canvas 具有屏幕尺寸的响应式变化页面上的 x, y 值

Question

我正在尝试从一页上的两个不同 canvases 获取 x、y 坐标，这可以通过响应屏幕调整大小来改变位置。

测试页面如下图所示：

使用我当前的代码，当我点击其中一个黑点时，我得到了我在其中点击的 canvas 的正确 x、y 坐标。

但是，如果调整页面大小并且右侧 canvas 低于左侧 canvas，当我单击现在较低的 canvas 黑点时，Y 值超出数英里我想不出办法解决这个问题。

下面显示的代码可以运行全屏响应调整大小。

我的目标是了解黑点何时被点击以及 canvas 此事件发生在什么时间。它必须能够通过在不同屏幕上调整页面大小来做到这一点

只是为了阐明 canvas 2 顶行的 Y 坐标是 15。如果我调整大小并且 canvas 2 下降到 canvas 1 以下，顶行的 y 变为大约 323但我需要它保持与调整大小之前相同的值

function circle (name, setTemp, temp){
  c=document.getElementById(name);
  var ctx=c.getContext("2d");
  c.width = 200;
  c.height = 300;
  ctx.fillStyle = "gray";
  ctx.fillRect(0, 0, c.width, c.height);
  ctx.beginPath();
  ctx.arc(100,170,5,0,2*Math.PI);
  ctx.fillStyle = 'black';
  ctx.fill();
}
circle ('den');
circle ('wc');
var den=document.getElementById('den');
den.addEventListener('mousedown',denClicked, false);
function denClicked(event){
    c=document.getElementById('den');
    var rect = c.getBoundingClientRect()
    var x = event.pageX - rect.left;
    var y = event.pageY;
  console.log('x: ' + x + ' y: ' + y);
}
var wc=document.getElementById('wc');
wc.addEventListener('mousedown',wcClicked, false);
function wcClicked(event){
    c=document.getElementById('wc');
    var rect = c.getBoundingClientRect()
    var x = event.pageX - rect.left;
    var y = event.pageY;
  console.log(rect);
    console.log('x: ' + x + ' y: ' + y);
}

* {
    box-sizing: border-box;
}

[class*="col-"] {
    float: left;
    padding: 5px;
}

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 768px){
/* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}
@media only screen and (min-width: 600px){
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="canvas.css">
  </head>
  <body>
    <div class="row">
      <div class="col-6">
         <div><canvas id="den"></canvas> </div>
      </div>
      <div class="col-6">
         <div><canvas id="wc"></canvas> </div>
      </div>
     </div>
    <div><script src="canvas.js"></script> </div>
  </body>
</html>

Answer 1

我相信我已经成功了。可能是更好的方法，但目前它在调整页面大小时有效。

在点击功能下我得到的页面高度可能已经调整过大小因此在点击功能下这样做的原因。如果页面宽度低于 css 中的宽度以更改页面布局，if 函数将增加一个补偿器以远离 Y 轴以给出正确的坐标。

到目前为止，它工作正常，需要用连续 4 个画布在不同的屏幕尺寸上进行更多测试

 var Ycompensator = 0;
function circle (name, setTemp, temp){
  c=document.getElementById(name);
  var ctx=c.getContext("2d");
  c.width = 200;
  c.height = 300;
  ctx.fillStyle = "gray";
  ctx.fillRect(0, 0, c.width, c.height);
  ctx.beginPath();
  ctx.arc(100,170,5,0,2*Math.PI);
  ctx.fillStyle = 'black';
  ctx.fill();
}
circle ('den');
circle ('wc');
var den=document.getElementById('den');
den.addEventListener('mousedown',denClicked, false);
function denClicked(event){
    c=document.getElementById('den');
    var rect = c.getBoundingClientRect()
    var x = event.pageX - rect.left;
    var y = event.pageY - rect.top;
  console.log('x: ' + x + ' y: ' + y);
}
var wc=document.getElementById('wc');
wc.addEventListener('mousedown',wcClicked, false);
function wcClicked(event){
    var w = window.innerWidth;
    if (w < 768){
      Ycompensator = 324;
    }
    c=document.getElementById('wc');
    var rect = c.getBoundingClientRect()
    var x = event.pageX - rect.left;
    var y = event.pageY - Ycompensator;
    console.log('x: ' + x + ' y: ' + y);
}

canvas 具有屏幕尺寸的响应式变化页面上的 x, y 值

canvas x, y value on a reponsive changing page with screen size

canvas

responsive