Javascript 画布绘图工具问题

我正在通过开发一个绘图工具来练习JavaScript，但是我有一些关于它的问题。首先，我现在得到的是：

（函数（$）{
var canvas=document.getElementById（'canvas'）；
var context=canvas.getContext（'2d'）；
//检测鼠标按下。设置xy坐标
var mouseDown=false；
$（画布）.mousedown（函数（e）{
mouseDown=true；
context.beginPath（）；
context.moveTo（e.pageX，e.pageY）；
});
//检测鼠标是否正在移动，并在鼠标仍向下时绘制线
$（画布）.mousemove（函数（e）{
如果（鼠标向下）{
var x=e.offsetX*2；
变量y=e.offsetY*2；
lineTo（x，y）；
context.strokeStyle='#000'；
stroke（）；
}
});
//鼠标向上时，重置坐标
$（画布）.mouseup（函数（）{
mouseDown=false；
closePath（）；
});
})（jQuery）
#画布{
宽度：400px；
高度：400px；
边框：1px实心；
保证金：0自动；
显示：块；
}

如果您的浏览器不支持HTML5画布，则会显示此文本。
我修好了！替换您的偏移：

var x = e.offsetX / 1.325;
var y = e.offsetY / 2.65;

为什么这样做？

用于定位鼠标的函数在两个方向上都具有恒定的偏移量。当我注意到绘图与鼠标呈指数关系时，我发现了这一点，但它正好位于图形的（0,0）处（因为任何偏移*0，坐标等于0）。我找到了画布的恒定偏移量并将其插入，它成功了！：）

我知道还有其他答案，它们可能更准确，但这并不意味着你必须讨厌这个：（
有几个问题：

您正在使用CSS拉伸画布，而不是设置实际的视口大小
我不知道是谁让你把你的偏移量乘以2的，但那是错误的。这只是一个问题，因为我说的是第1点
下面是如何在没有幻数的情况下正确修复它


（函数（$）{
var canvas=document.getElementById（'canvas'）；
var context=canvas.getContext（'2d'）；
var mouseDown=false；
$（画布）.mousedown（函数（e）{
mouseDown=true；
context.beginPath（）；
//我还建议将pageX/Y更改为offsetX/Y
//否则你会得到这种奇怪的跳跃效果
context.moveTo（e.offsetX，e.offsetY）；
});
$（画布）.mousemove（函数（e）{
如果（鼠标向下）{
//拆下倍增器
var x=e.offsetX；
变量y=e.offsetY；
lineTo（x，y）；
context.strokeStyle='#000'；
stroke（）；
}
});
$（画布）.mouseup（函数（）{
mouseDown=false；
closePath（）；
});
})（jQuery）；
#画布{
/*您不需要在此处设置大小*/
边框：1px实心；
保证金：0自动；
显示：块；
}

如果您的浏览器不支持HTML5画布，则会显示此文本。
画布分辨率V显示大小
问题在于画布分辨率和画布显示大小不匹配

画布分辨率通过画布宽度和高度属性设置

<canvas id="canvasId" width="400" height="400"></canvas>

如果不设置这些值，画布将默认为300 x 150

显示大小是画布在页面上显示的实际大小，通过样式属性“宽度”和“高度”设置

<canvas id="canvasId" style="width:400px;height:400px;"></canvas>

或者在CSS中

 #canvasId { 
     width : 400px;
     height : 400px;
 }

解决你的问题
你的问题有两种解决办法

首先是使显示大小与画布分辨率匹配

或者，您可以使用显示大小和画布分辨率之间的差异来计算鼠标的比例

var bounds = canvasId.getBoundingClientRect()
mouseScaleX = canvasId.width / bounds.width; 
mouseScaleY = canvasId.height / bounds.height; 
// then multiply the mouse coords with scales

代码示例
我已经修改了您的代码片段以缩放鼠标坐标以匹配画布分辨率


（函数（$）{
var canvas=document.getElementById（'canvas'）；
var context=canvas.getContext（'2d'）；
//检测鼠标按下。设置xy坐标
var mouseDown=false；
$（画布）.mousedown（函数（e）{
mouseDown=true；
var bounds=e.target.getBoundingClientRect（）
mouseScaleX=e.target.width/bounds.width；
mouseScaleY=e.target.height/bounds.height；
context.beginPath（）；
context.moveTo（e.offsetX*mouseScaleX，e.offsetY*mouseScaleY）；
});
//检测鼠标是否正在移动，并在鼠标仍向下时绘制线
$（画布）.mousemove（函数（e）{
如果（鼠标向下）{
var bounds=e.target.getBoundingClientRect（）
mouseScaleX=e.target.width/bounds.width；
mouseScaleY=e.target.height/bounds.height；
var x=e.offsetX*鼠标；
变量y=e.offsetY*mouseScaleY；
lineTo（x，y）；
context.strokeStyle='#000'；
stroke（）；
}
});
//鼠标向上时，重置坐标
$（画布）.mouseup（函数（）{
mouseDown=false；
closePath（）；
});
})（jQuery）；
#画布{
宽度：400px；
高度：400px；
边框：1px实心；
保证金：0自动；
显示：块；
}

如果您的浏览器不支持HTML5画布，则会显示此文本。
但这是为什么？你能给我一个解释吗？好了：）我希望这有帮助！这是一个有点支离破碎的答案。这只会起作用，因为他们不正确地拉伸画布。
 #canvasId { 
     width : 400px;
     height : 400px;
 }

var bounds = canvasId.getBoundingClientRect()
mouseScaleX = canvasId.width / bounds.width; 
mouseScaleY = canvasId.height / bounds.height; 
// then multiply the mouse coords with scales