用“铅笔”在画布上绘图

Question

我制作了一个脚本，在画布上绘制一系列线条，使其看起来像素描。这个脚本有两个问题。第一，为什么y值是它应该是的两倍？第二，为什么线条几个像素宽并且逐渐变淡？

我已经在Google Chrome和Firefox中尝试过，但得到相同的错误结果。我意识到可以将y值除以2来解决第一个问题，但我的问题的一部分是为什么我需要这样做。我不应该这样做。

- Tyler Crompton

---

lineWidth 可能会解决线宽问题；淡出可能是由于画布的抗锯齿能力。关于 y 轴问题，我不明白：你有一些我们可以检查的代码吗？ - Cystack

我看过你的代码：你需要给你的画布指定一个宽度和高度！ - Cystack

Answer 1

我认为你有两个问题：

1. 你需要更加小心地计算绘制的偏移量。下面有一些代码演示了如何正确处理这个问题。
2. 你没有在 <canvas> 元素本身上设置宽度和高度，这意味着它会根据你在 css 中设置的方式以奇怪的方式缩放你的线条。

一个例子

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

http://xjamundx.no.de/

如果有帮助的话，源代码也在 Github 上：

• https://github.com/xjamundx/CollabPaintJS/（主存储库）
• https://github.com/xjamundx/CollabPaintJS/blob/master/public/collabpaint.js（画布绘制代码）

特别是我会做类似这样的事来找出绘制位置：

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

- Jamund Ferguson

---

在HTML中设置宽度和高度而不是CSS，解决了这两个问题！非常感谢！ - Tyler Crompton

Answer 2

给你的画布指定一个宽度和高度；一定要！ http://jsfiddle.net/mz6hK/7/

固定的

- Cystack

---

不冒犯，但这个问题已经有一个被接受的答案，其中提到了你回答的内容。如果我不知道得更好，我会指责你窃取别人的答案。 - Tyler Crompton

是的，我看过那个，还有一个更好的，但当另一个人回答时，我正在检查你的代码；不冒犯。 - Cystack