Javascript 在画布上用一个“"；铅笔“；

我做了一个在画布上画了一系列线的草图。脚本有两个问题。第一，为什么y值是应该值的两倍？第二，为什么线条有几个像素宽，并且褪色了

---

我在Google Chrome和Firefox上都试过了，结果都不正确。我意识到我可以用y值除以2来解决第一个问题，但我的问题是为什么我需要这样做。我不应该这样做。

我想你有两个问题：

在计算绘制位置的偏移时，需要更加小心。下面我有一些代码演示了如何正确处理这个问题

您没有在

元素本身上设置宽度和高度，这意味着它将根据您在css中设置的内容以有趣的方式缩放行

示例

我使用

和socket.io构建了一个简单的协作绘图应用程序，让你像铅笔一样在屏幕上绘图。您可以在这里查看：

如果有帮助，源代码也在github上：

• （主要回购协议）
• （画布绘图代码）

特别是我这样做是为了找出在哪里画东西：

x = e.clientX + window.scrollX
y = e.clientY + window.scrollY
x -= $game.offsetLeft
y -= $game.offsetTop

---

给画布一个宽度和高度；永远！

---

固定

线宽可能会固定线条的宽度问题；淡入淡出可能是由于canvas的抗锯齿功能。关于y问题，我不明白：你有一些我们可以检查的代码吗？我看过你的代码：你需要给你的画布一个宽度和高度！在HTML而不是CSS中设置宽度和高度修复了这两个问题！非常感谢！无意冒犯，但是这个问题已经有了一个公认的答案，提到了你的答案。如果我不知道的话，我会指控偷了别人的答案。是的，我看到了，还有一个更好的答案，但我在检查你的密码，而另一个人回答；无意冒犯