HTML5畫布繪製和更新

對不起，標題是多麼模糊，但我不完全確定如何總結我想要問的東西。HTML5畫布繪製和更新

首先，這裏是什麼，我至今一jsFiddle。

我剛開始學習使用HTML5 canvas元素，以及使用js OOP。

你可以從小提琴看到，我創建一個矩形類（這樣我可以創造儘可能多的廣場越好，但我認爲這可能是多餘的），並引用它來繪製。但是，當我設置height = width時，我總是以非方形結束。我對使用畫布相對比較陌生，但我認爲這是因爲正方形的高度和寬度與畫布元素的大小有關，所以畫布元素的高度和寬度不能成比例（因爲它們的賦值百分比值相反確定像素）。

我可以用正方形的大小設置爲像素解決這個問題，但後來當我叫按鍵事件，方完全不動。

此外，我有keypress事件，以便用戶可以用箭頭鍵移動廣場。然而，即使當我在代碼中翻轉它們時，上/下鍵值似乎也被反轉了。左/右鍵不做任何事情？

而且，我也只能讓廣場向上/向下移動一次？只要用戶一直按下相應的按鈕，我的代碼不應該允許我增加x/y值嗎？

如果有人可以檢查一下，並給我一些關於我做錯了什麼的指針，那會很棒！我嘗試了很多新東西，因爲它只是一個學習體驗，所以如果你覺得如此傾向，請幫助我學習！

來源

2011-07-28 Jordan Foreman

您經歷了一次調整畫布大小時經常出錯的問題 - 嘗試使用CSS。使用CSS進行畫布繪製會縮放 - 不會改變分辨率。要設置分辨率，請使用HTML中的width=和height=屬性。

至於運動，似乎keyup工作得更好。但是，對於up密鑰，y會減少（頂部是0，底部是正數）。

我想強調一些其他的事情。

使用canvas作爲上下文中的變量名是有點曖昧。畫布和用於繪畫的上下文有所不同。

此外，如果ctx不存在，則表示//browser doesn't support html5。但是，如果瀏覽器不支持canvas/HTML5，那麼.getContext('2d')函數調用將會失敗，因爲在這種情況下它不是函數。您的else語句只會在功能存在但不返回任何內容時纔會執行。這可能永遠不會是這樣。

空else循環是不是很有用下去，但不傷害:)

http://jsfiddle.net/DqrEm/4/

來源

2011-07-28 15:47:36 pimvdb

'else'語句甚至不需要在那裏，因爲放置在開始和結束'canvas'標記內的內容是不支持'canvas'時顯示的內容。 –

謝謝！這是完美的作品，雖然我不是使用'.keyup'的巨大粉絲，因爲用戶必須反覆按下按鍵來移動正方形，而不是能夠按住鍵... –

@Jordan Foreman ：請看看http://jsfiddle.net/DqrEm/6/。通過設置標誌並運行間隔，您可以獲得流暢的動畫。同時按鍵也可以這樣。 – pimvdb

你的問題是不是與你的平方大小，但如何調整您canvas。在你的jsfiddle中，當我將canvas起始行改爲<canvas id="practice" width="500" height="500">時，廣場被正確繪製。我嘗試將CSS中的width和height從100％更改爲500px，但仍然錯誤地繪製了正方形。

更新：設置width和height到100％，在實際canvas標籤（即<canvas id="practice" width="100%" height="100%">）工作過。

來源

2011-07-28 15:46:42

讓我試試吧...當我開始閱讀關於canvas元素，寬度和高度總是在元素標籤內聲明，但不是該方法無效的標記？ –

通常是的，但我相信它可以用於「畫布」。 –

我想我沒有考慮過......謝謝！ –

HTML5畫布繪製和更新

回答

相關問題