为什么我只能在我的 Canvas 的中心画画而不能真正跟随我的 cursor

Question

canvasContent is the canvas itself canvasContent 是 canvas 本身

canvasContent.width = window.innerWidth; //probleme HERE !!!
canvasContent.height = window.innerHeight; // and HERE

let drawing = false;
let lastX;
let lastY;

// Start drawing
canvasContent.onmousedown = function(event) {
  drawing = true;
  lastX = event.clientX;
  lastY = event.clientY;
};

// Keep drawing
canvasContent.onmousemove = function(event) {
  if (drawing) {
    let x = event.clientX;
    let y = event.clientY;
    console.log(x, y, lastX, lastY);
    canvasContext.beginPath();
    canvasContext.moveTo(lastX, lastY);
    canvasContext.lineTo(x, y);
    canvasContext.stroke();
    lastX = x;
    lastY = y;
  }
};`

// Stop drawing
canvasContent.onmouseup = function() {
  drawing = false;
};

I create a canvas but i can only draw on the center.我创建了一个 canvas 但我只能在中心绘制。 And my cursor is not well placed.而我的cursor位置不太好。 enter image description here在此处输入图像描述

I try to change all the container like using absolute value or vw vh and in js i try using offset instead of clientX enter image description here我尝试更改所有容器，例如使用绝对值或 vw vh，在 js 中我尝试使用 offset 而不是 clientX enter image description here

Answer 1

I'm not entirely sure what you mean by only being able to draw in the middle of the canvas. So instead I've tried to answer your comment about it not lining up properly.我不完全确定你所说的只能在 canvas 的中间绘制是什么意思。所以我试着回答你关于它没有正确排列的评论。

For canvas in HTML, you can get the bounding rect and subtract that from the clientX and Y to "normalize" the coordinates.对于 HTML 中的 canvas，您可以获得边界矩形并从 clientX 和 Y 中减去它以“规范化”坐标。

You need to do this to get the coordinates to line up with the tip of your cursor because the viewport of the canvas element is offset from its content.您需要执行此操作以使坐标与 cursor 的尖端对齐，因为 canvas 元素的视口偏离其内容。

You almost always have to do this when working with mouse input on the canvas element so I don't know why it doesn't have it built in but you can read more about it here.在 canvas 元素上使用鼠标输入时，您几乎总是必须这样做，所以我不知道为什么它没有内置，但您可以在此处阅读更多相关信息。

https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect

I've included a snippet below of what I believe you wanted to do.我在下面包含了我认为您想做的事情的片段。

 const canvasContent = document.getElementById("drawing"); const canvasContext = canvasContent.getContext("2d"); // this get's the coordinates of the top left corner of the canvas let rekt = canvasContent.getBoundingClientRect(); let lastX = 0; let lastY = 0; let drawing = false; canvasContent.addEventListener("mousemove", function(event) { if (drawing) { const fixedX = event.clientX - rekt.x; const fixedY = event.clientY - rekt.y; canvasContext.beginPath(); canvasContext.moveTo(lastX, lastY); canvasContext.lineTo(fixedX, fixedY); canvasContext.stroke(); lastX = fixedX; lastY = fixedY; } }); canvasContent.addEventListener("mousedown", function(event) { lastX = event.clientX - rekt.x; lastY = event.clientY - rekt.y; drawing = true; }); canvasContent.addEventListener("mouseup", function(event) { drawing = false; });

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Document</title> </head> <body> <canvas id="drawing" style="border; 1px solid black;"> </body> </html>

为什么我只能在我的 Canvas 的中心画画而不能真正跟随我的 cursor

问题描述

1 个解决方案

解决方案1
-1 2023-01-12 02:46:46

为什么我只能在我的 Canvas 的中心画画而不能真正跟随我的 cursor

问题描述

1 个解决方案

解决方案1 -1 2023-01-12 02:46:46

解决方案1
-1 2023-01-12 02:46:46