用“铅笔”画在画布上

Question

我制作了一个script，它在画布上绘制了一系列线条，使其看起来像草图。脚本有两个问题。一，为什么y值应该是它应该的两倍？还有两个，为什么线条几个像素宽并逐渐消失？

我在谷歌浏览器和Firefox中都尝试过这种方法，但我得到了同样错误的结果。我意识到我可以将y值除以2以解决第一个问题，但我的问题的一部分是为什么我需要这样做。我不应该这样做。

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

Answer 2

为画布指定宽度和高度;总是！ http://jsfiddle.net/mz6hK/7/

已修复