javascript - 使用 "pencil"在 Canvas 上绘图

Question

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

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

Answer 1

我认为你有两个问题:

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

一个例子

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

http://xjamundx.no.de/

如果可能有帮助，源代码也在 github 上:

• https://github.com/xjamundx/CollabPaintJS/ (主要 repo )
• https://github.com/xjamundx/CollabPaintJS/blob/master/public/collabpaint.js ( Canvas 绘图代码)

特别是我做了这样的事情来弄清楚在哪里画东西:

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