我有一个画布（#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>我设置画布的大小在Javascript而不是HTML设置它的。此外，我已经添加了一些变量，以使与窗口大小的图纸比例。我希望这有帮助。
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;
}<canvas id="myCanvas_one"></canvas>