为什么它远离 canvas 上的 cursor？
[英]Why does it draw far away from the cursor on a canvas?
问题描述
I'll first give my code:
我将首先给出我的代码：
document.documentElement.style.backgroundImage='url(\'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><rect width="20" height="20" style="fill-opacity:0;stroke-width:1;stroke:rgb(0,0,255)"/></svg>\')'; var c=document.getElementById("paper").getContext("2d"); c.fillStyle="#000000"; document.documentElement.onmousemove=function(e){ if((e.buttons||e.which)===1){ var x=e.pageX,y=e.pageY; c.fillRect(x,y,1,1); } };
html{width:100vw;height:100vh;overflow:hidden;background-repeat:repeat;cursor:crosshair} body{margin:0} #paper{position:absolute;left:0;top:0;width:100vw;height:100vh;z-index:1}
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>Graph Paper</title> </head> <body> <canvas id="paper"></canvas> </body> </html>
I'm trying to make a virtual graph paper you can draw on with the cursor.我正在尝试制作一张虚拟方格纸，您可以使用 cursor 在其上绘制。 The problem is that if you run it and (using your mouse) draw something, you will notice that the place it draws isn't actually where you're at - it's farther away from you as you get farther away from (0,0).问题是，如果您运行它并（使用鼠标）绘制一些东西，您会注意到它绘制的位置实际上并不是您所在的位置 - 当您远离 (0,0 ）。
My code is a bit simple so I have no idea on why it is doing this.我的代码有点简单，所以我不知道它为什么这样做。 For example, if you start in the middle, and move towards (0,0), you will see it starts behind you but reaches at the same time as you.例如，如果您从中间开始，向 (0,0) 移动，您会看到它从您身后开始，但与您同时到达。 And if you start in the middle and go towards the bottom right, it will get much farther than you by the time you reach.如果你从中间开始，go 从右下角开始，你到达的时候它会比你更远。
I suspect this has something to do with either the canvas being mispositioned or e.pageX and e.pageY to be incorrect in some way.我怀疑这与 canvas 定位错误或e.pageX和e.pageY在某些方面不正确有关。
Why is this seemingly simple code not working?为什么这个看似简单的代码不起作用？
1 个解决方案
解决方案1
1 已采纳 2021-04-16 16:09:21
Stretching a canvas with css does not change the underlying resolution of the canvas, but simply takes the resulting image, and scales it (usually rather poorly as well).用 css 拉伸 canvas 不会改变 canvas 的基本分辨率，而只是简单地获取生成的图像，并对其进行缩放（通常也很差）。
If the canvas is eg stretched by a factor of two due to css, your pixel counting is accordingly off by that factor: the canvas renders it inwards as many pixels as your mouse coordinates, but the result is then stretched by css afterwards. If the canvas is eg stretched by a factor of two due to css, your pixel counting is accordingly off by that factor: the canvas renders it inwards as many pixels as your mouse coordinates, but the result is then stretched by css afterwards.
You could compensate for this by some calculations, but it's often better to make the canvas itself the correct size:您可以通过一些计算来弥补这一点，但通常最好使 canvas 本身具有正确的尺寸：
const canvas = document.getElementById("paper"); const ctx = canvas.getContext("2d"); document.documentElement.style.backgroundImage = 'url(\'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><rect width="20" height="20" style="fill-opacity:0;stroke-width:1;stroke:rgb(0,0,255)"/></svg>\')'; canvas.width = window.innerWidth; canvas.height = window.innerHeight; ctx.fillStyle = "#000000"; document.documentElement.onmousemove=function(e){ if ((e.buttons || e.which) === 1) { const x = e.pageX, y = e.pageY; ctx.fillRect(x, y, 1, 1); } };
html { width: 100vw; height: 100vh; overflow: hidden; background-repeat: repeat; cursor: crosshair } body { margin: 0 } #paper { position: absolute; left: 0; top: 0; z-index: 1 }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>Graph Paper</title> </head> <body> <canvas id="paper"></canvas> </body> </html>
Note, that this way, you don't get resizing for free.请注意，这样，您不会免费调整大小。 Should the window be resized, you'd need to change the canvas again, from code, which i have omitted here.如果 window 被调整大小，您需要再次从代码中更改 canvas，我在这里省略了。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.