Javascript 在HTML5画布上绘制：如何在鼠标光标尖端绘制

我有下面的代码，允许我在画布上画画，类似于MS Paint。因此，一旦用户按下鼠标左键，他/她就可以在画布上移动鼠标来绘制图片。一旦用户将手指从鼠标按钮上提起，绘图就会停止

var colors=document.querySelectorAll（“#colors div”）；
var link=document.getElementById（'download'）；
var canvas=document.getElementById（'canvas'）；
var context=canvas.getContext（'2d'）；
var绘图=错误；
var-prev；
document.getElementById（'current'）.style.backgroundColor=context.strokeStyle；
对于（变量i=0；i
#绘制{
边框：2件黑色；
边界半径：5px；
显示：内联块；
保证金：5px；
填充：10px；
}
#容器{
边框：2件纯黑；
宽度：300px；
高度：300px；
位置：相对位置；
}
#帆布{
背景颜色：浅灰色；
}
#颜色{
浮动：对；
位置：相对位置；
宽度：20%；
身高：100%；
}
#颜色组{
宽度：100%
}
#钮扣{
宽度：100%；
高度：自动；
}
#按钮*{
宽度：33%；
背景颜色：浅灰色；
边缘顶部：5px；
左边距：5px；
显示：内联；
}
#下载{
文本对齐：居中；
边界半径：2px；
左侧填充：5px；
右侧填充：5px；
边框：2件浅灰色；
字体系列：“Arial”；
背景颜色：浅灰色；
字号：10pt；
光标：上下文菜单；
}
#下载：链接{
文字装饰：无；
颜色：黑色；
}
#下载：活动{
边框：2张插图#00acff；
边界半径：2px；
}
#当前{
身高：100%；
宽度：10%；
边框：1px纯黑；
显示：内联；
位置：相对位置；
左边距：25px；
}

下载图像
canvas.width是绘图画布的宽度，不一定是canvas元素的宽度。这意味着画布上下文可以具有与屏幕不同的分辨率。所以你需要相应地调整你的坐标。i、 e

var coord = {
  'x': (e.clientX - this.offsetLeft)*this.width/this.clientWidth,
  'y': (e.clientY - this.offsetTop)*this.height/this.clientHeight
};

此.offsetLeft
等于0。这就是为什么从中减去什么都不起作用，因为在函数的范围内，“this”就是画布本身。您希望使用鼠标事件\，而不是clientX\Y，因此简单地说，这是：

var coord = { 'x': e.offsetX, 'y': e.offsetY };

有趣的是，在代码片段中，它具有错误行为。你的代码看起来很简单，如果没有人回答，我会在有时间的时候研究它。这个答案可以特别帮助findxy函数。在我的笔记本电脑上，它的分辨率为
1920 x 1080
我可以通过修改
coord
来解决这个问题：
var coord={'x'：event.clientX-this.offsetLeft-25，'y'：event.clientY-this.offsetTop-25
，虽然我不完全确定
25
与什么有关，因为我确定它与什么有关！在这种情况下
offset
到底意味着什么？@Delfino引用链接：“提供该事件与目标节点的填充边之间鼠标指针X坐标的偏移量。”。