Question

我有一个画布（#myCanvas_one），其内部具有光标位置跟踪。使用.beginPath（）和.rect（）创建光标之后的行。每次我尝试使画布在页面上响应或更改其位置时，光标跟踪都会中断。

我尝试使用此代码，但是光标跟踪取决于画布的位置和大小。

我希望画布在屏幕调整大小时更改尺寸，并且鼠标跟踪与画布在页面上的位置无关。

我正在尝试建立一个响应式网格。

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <style>
    canvas {
      border: #000 1.5px solid;
      margin-left: 8px;
      margin-right: 8px;
    }
  </style>
</head>

<body>
  <canvas id="myCanvas_one" width="174px" height="92px"></canvas>

  <script>
    var canvastwo = document.querySelector("#myCanvas_one");
    var contexttwo = canvastwo.getContext("2d");

    var canvasPostwo = getPosition(canvastwo);
    var mouseQ = 0;
    var mouseW = 0;

    canvastwo.addEventListener("mousemove", setMousePositiontwo, false);

    function setMousePositiontwo(r) {
      mouseQ = r.clientX - canvasPostwo.a;
      mouseW = r.clientY - canvasPostwo.b;
    }

    function updatetwo() {
      contexttwo.clearRect(0, 0, canvastwo.width, canvastwo.height);
      contexttwo.beginPath();
      contexttwo.lineWidth = "1.5";
      contexttwo.strokeStyle = "black";
      contexttwo.rect(mouseQ - 42, mouseW - 21, 84, 42);
      contexttwo.stroke();

      contexttwo.beginPath();
      contexttwo.moveTo(0, 0);
      contexttwo.lineTo(mouseQ - 42, mouseW - 21);
      contexttwo.stroke();

      contexttwo.beginPath();
      contexttwo.moveTo(0, 92);
      contexttwo.lineTo(mouseQ - 42, mouseW + 21);
      contexttwo.stroke();

      contexttwo.beginPath();
      contexttwo.moveTo(174, 0);
      contexttwo.lineTo(mouseQ + 42, mouseW - 21);
      contexttwo.stroke();

      contexttwo.beginPath();
      contexttwo.moveTo(174, 92);
      contexttwo.lineTo(mouseQ + 42, mouseW + 21);
      contexttwo.stroke();

      requestAnimationFrame(updatetwo);
    }

    updatetwo();

    function getPosition(qw) {
      var aPosition = 0;
      var bPosition = 0;

      while (qw) {
        aPosition += (qw.offsetLeft - qw.scrollLeft + qw.clientLeft);
        bPosition += (qw.offsetTop - qw.scrollTop + qw.clientTop);
        qw = qw.offsetParent;
      }
      return {
        a: aPosition,
        b: bPosition
      };
    }
  </script>
</body>

</html>

Answer 1

我正在用Javascript设置画布的大小，而不是在html中设置画布的大小。另外，我还添加了一些变量以使您的绘图与窗口大小成比例。我希望这会有所帮助。

trafficPolicy

var canvastwo = document.querySelector("#myCanvas_one");
let cw = canvastwo.width=window.innerWidth;
let ch = canvastwo.height=window.innerHeight;

let W = cw/2,w=cw/4;H=ch/2,h=ch/4

    var contexttwo = canvastwo.getContext("2d");

    var canvasPostwo = getPosition(canvastwo);
    var mouseQ = 0;
    var mouseW = 0;

    canvastwo.addEventListener("mousemove", setMousePositiontwo, false);

    function setMousePositiontwo(r) {
      mouseQ = r.clientX - canvasPostwo.a;
      mouseW = r.clientY - canvasPostwo.b;
    }

    function updatetwo() {
      contexttwo.clearRect(0, 0, canvastwo.width, canvastwo.height);
      contexttwo.beginPath();
      contexttwo.lineWidth = "1.5";
      contexttwo.rect(mouseQ - w, mouseW - h, W, H);
      contexttwo.stroke();

      contexttwo.beginPath();
      contexttwo.moveTo(0, 0);
      contexttwo.lineTo(mouseQ - w, mouseW - h);
      contexttwo.stroke();

      contexttwo.beginPath();
      contexttwo.moveTo(0, ch);
      contexttwo.lineTo(mouseQ - w, mouseW + h);
      contexttwo.stroke();

      contexttwo.beginPath();
      contexttwo.moveTo(cw, 0);
      contexttwo.lineTo(mouseQ + w, mouseW - h);
      contexttwo.stroke();

      contexttwo.beginPath();
      contexttwo.moveTo(cw, ch);
      contexttwo.lineTo(mouseQ + w, mouseW + h);
      contexttwo.stroke();

      requestAnimationFrame(updatetwo);
    }

    updatetwo();

    function getPosition(qw) {
      var aPosition = 0;
      var bPosition = 0;

      while (qw) {
        aPosition += (qw.offsetLeft - qw.scrollLeft + qw.clientLeft);
        bPosition += (qw.offsetTop - qw.scrollTop + qw.clientTop);
        qw = qw.offsetParent;
      }
      return {
        a: aPosition,
        b: bPosition
      };
    }

function Init(){
  cw = canvastwo.width=window.innerWidth;
  ch = canvastwo.height=window.innerHeight;

  W = cw/2,w=cw/4;H=ch/2,h=ch/4;
  updatetwo()
}

window.setTimeout(function() {
  Init();
  window.addEventListener('resize', Init, false);
}, 15);

* {
  margin: 0;
  padding: 0;
}
canvas {
  border: #000 1.5px solid;
}

在屏幕调整大小时及时更改画布尺寸，而不会丢失光标位置跟踪

1 个答案: