1. 首頁
  2. 問答
  3. 用「鉛筆」在畫布上繪圖

用「鉛筆」在畫布上繪圖

2012-01-14 85 views
4

我做了一個script，它在畫布上繪製一系列線條，使其看起來像草圖。腳本有兩個問題。一，爲什麼y的值是原來的兩倍？還有兩個，爲什麼這條線寬幾個像素並淡出？用「鉛筆」在畫布上繪圖

我已經在Google Chrome和Firefox中試過了，並且得到了同樣不正確的結果。我意識到我可以將y值除以2來解決第一個問題，但是我的問題的這一部分是爲什麼我需要這樣做。我不應該。

來源

2012-01-14 Tyler Crompton

+0

的lineWidth可能會解決問題線的寬度; fadind可能是由於canvas的抗鋸齒功能。關於y的問題，我不明白：你有一些我們可以檢查的代碼嗎？ – Cystack 2012-01-14 22:18:41

+0

我提供了一個鏈接。 – 2012-01-14 22:22:29

+1

我見過你的代碼：你需要給你的畫布一個寬度和高度！ – Cystack 2012-01-14 22:41:46

回答

2

我認爲你有兩個問題：

  1. 你需要在你如何計算繪製位置偏移更加小心。我下面有一些代碼演示瞭如何正確處理這個問題。
  2. 你不是設置<canvas>元素本身的寬度和高度，這意味着它會根據你在css中設置的方式以有趣的方式縮放你的線條。

一個例子

我建立<canvas>和socket.io，讓你畫到像鉛筆屏幕的簡單協作繪圖應用程序。您可以點擊此處查看：

http://xjamundx.no.de/

該人士還在GitHub上，如果可能的幫助：

特別是我做了這樣的事情，弄清楚在哪裏繪製東西：

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

來源

2012-01-14 22:20:06

+0

在HTML中設置寬度和高度而不是CSS可以解決這兩個問題！謝謝一堆！ – 2012-01-14 22:24:18

1

爲您的畫布指定寬度和高度;總是！ http://jsfiddle.net/mz6hK/7/

固定

來源

2012-01-14 22:43:31 Cystack

+0

沒有冒犯，但這個問題已經有一個接受的答案，提到你的答案。如果我不知道更好，我會指責竊取別人的答案。 – 2012-01-14 22:48:14

+0

是的，我已經看到了，更好的一個，但我正在檢查你的代碼，而另一個人回答;沒有冒犯的意思 – Cystack 2012-01-14 22:52:12

相關問題

 相關問題