我使用純JavaScript創建了一個基本的2D遊戲。我的問題是當精靈停止移動時,有時候模糊有時候不會。我使用來移動精靈和觸發移動的事件。當鍵入被觸發時,精靈停止移動並且默認磁貼被設置,但有時它顯示模糊。 https://arpadvas.github.io/untitled_game_project/使用requestAnimationFrame移動它時,爲什麼我的精靈模糊了?
0
A
回答
0
由於您沒有發佈最低代碼示例,並且我不想通過鏈接到的原始代碼,所以這將保留爲猜測(受過教育的代碼)。
通常情況下,當您在浮動座標上繪製精靈時會發生這種情況。
由於沒有辦法繪製半個像素,該像素是畫布中最小的單位,爲了平滑繪圖,瀏覽器將默認創建抗鋸齒僞像,將一些像素變得更不透明,以便您的眼睛認爲它是一半一個像素。 雖然這通常適用於逼真的照片,但它完全不符合像素藝術。
解決方案然後是將所有座標舍入,或者如果您懶惰,則設置您的上下文的imageSmoothingEnabled屬性。
var img = new Image();
img.onload = draw;
function draw(){
i = .316252;
blurred.width = round.width = noAntiAlias.width = img.width +20;
blurred.height = round.height = noAntiAlias.height = img.height +20;
blurred.getContext('2d').drawImage(img, 10+i, 20+i);
round.getContext('2d').drawImage(img, 10, 20);
var nA = noAntiAlias.getContext('2d');
nA.mozImageSmoothingEnabled = nA.msImageSmoothingEnabled = nA.webkitImageSmoothingEnabled = nA.imageSmoothingEnabled = false;
noAntiAlias.getContext('2d').drawImage(img, 10+i, 20+i);
};
img.src = "https://dl.dropboxusercontent.com/s/4e90e48s5vtmfbd/aaa.png";
<canvas id="blurred"></canvas>
<canvas id="round"></canvas>
<canvas id="noAntiAlias"></canvas>
PS:這讓我意識到,不知我的FF不順利我用這個特定的圖像......如果有人能在註釋中確認,我會很高興挖成如果需要,可以進一步提供。
+0
我實際上發現FF在畫布上禁用imageSmoothing小於128 * 128像素,很奇怪。 – Kaiido
相關問題
- 1. 爲什麼我的精靈不移動?
- 2. 瞭解SpriteKit:移動精靈
- 3. 我無法爲精靈動畫,我做錯了什麼?
- 4. 爲什麼我的地圖每當我的精靈移動時都會消失?
- 5. 從setInterval方法移動到帶有精靈的requestAnimationFrame
- 6. 當我移動slick2D Java中的角色時,爲什麼我的動畫模糊?
- 7. 定時移動精靈
- 8. 爲什麼我的精靈不顯示?
- 9. 爲什麼easelJS縮放我的精靈?
- 10. 爲什麼我的精靈彈跳?
- 11. 使精靈不可移動
- 12. 當在精靈中移動它時,圍繞精靈的黑色邊框
- 13. ,我不能讓我的精靈移動
- 14. 瞭解DIP精靈移動/速度
- 15. 爲什麼這會嘗試對我的移動精靈進行動畫製作?
- 16. 分組精靈並移動它們?
- 17. 使用精靈的移動html5視頻
- 18. GTK和SFML 2模糊的精靈
- 19. 移相器 - 用另一個精靈移動精靈
- 20. 爲什麼我的精靈不能與加速度計一起移動?
- 21. 爲什麼我的精靈/實體不會在一條直線上移動?
- 22. 更改鼠標移動時的精靈
- 23. 爲什麼ScaleModifier會使精靈閃爍?
- 24. 移動精靈的方向
- 25. 精靈在手機上模糊
- 26. 安卓精靈移動時它應該是固定的
- 27. Cocos2d精靈在移動時閃爍
- 28. 在旋轉時移動一個精靈
- 29. 在一段時間內移動精靈
- 30. AndEngine精靈正在移動
哪個瀏覽器?在Firefox的64位工作正常 –
這可能是你的顯示器的灰色到灰色的過渡 –
你可以張貼問題的截圖? – qxz