2011-04-21 139 views
1

我正在製作一個類似於繪畫的網絡應用程序。我現在面臨的問題是我的繪圖算法非常慢。基本上我正在做的是在連續的像素之間繪製一條直線,這些像素已經用mousemove事件記錄下來。html 5畫布繪製慢!

是否有更智能/(更便宜)的方式來繪製用戶創建的線條和曲線使用HTML 5畫布?

編輯: 只有當我重畫已經在畫布上的筆畫時,速度非常慢。

+0

如何保存每個像素的顏色,以及如何重新繪製畫布? – Jonas 2011-04-21 16:54:56

+2

我們可以看到你的代碼嗎?正如你所描述的,你的代碼應該非常快,但是你可能會保存太多的數據或者重做太多的工作。 – 2011-04-21 17:03:11

+0

我有一個名爲rgba的私有變量,我設置context.strokeStyle = rgba – fogy 2011-04-21 17:03:53

回答

1

緩慢(究竟是什麼慢?加載速度慢,或渲染速度慢?)可能是由瀏覽器中的硬件加速引起的。什麼是您的瀏覽器/操作系統?我發現OS X中的Safari 5和Windows 7中的IE9由於其硬件加速而具有最快的提取率。在Chrome中,您必須在about:flags中打開它,並且它有點挑剔。

+0

速度慢的唯一時候是我想重新繪製用戶完成的筆畫。例如,用戶在畫布上繪製50行,我想清除畫布並重新繪製所有這50行。 – fogy 2011-04-21 17:13:56

2

你想在概念上做什麼應該是令人難以置信的快速。既然你不會給我們的代碼,在這裏:

http://jsfiddle.net/mXrNk/1/

如果這是速度更快,使用它作爲一個起點。

+3

請注意,由於您正在爲每個mousemove事件重新繪製相同的漫長路徑,而不是正確繪製三角洲,所以會出現可怕的鋸齒。這裏是一個最小改變的版本,它的表現應該如下:http://jsfiddle.net/mXrNk/2/ – Phrogz 2011-04-21 20:43:56

+0

+1!我完全忽略了。一如既往的行善,Phrogz – 2011-04-21 22:39:51