重寫javascript動畫以防止在瀏覽器中縮放/模糊

我的腳本編程能力有限，而且我試圖重新爲電子教學課程動畫重新編寫一個小腳本。重寫javascript動畫以防止在瀏覽器中縮放/模糊

在幾年前（不再可用）的幫助下，將一個AS3動畫移植到JS。當JS在FF，IE或Chrome上測試/運行時，它很模糊。

從我可以理解的內容開始，該腳本使用1x1像素的矩形繪製動畫。這導致縮放，模糊和失真。

我不知道如何重新編寫canvas畫圖的JavaScript，以便它使用正確大小的矩形（8x8像素而不是1x1像素）？

我認爲一旦從1x1更改爲8x8，那麼腳本，index.html和style.css中的畫布大小可能需要更改以匹配（最終大小應該是640X640）？

任何幫助讚揚與重寫（我嘗試了我所知道的一切，但沒有成功）。

鏈接（index.html的，src.js，style.css文件）：
https://elearningprojects.com/websample1/index.html

來源

2013-07-16 user1134527

畫布僅僅是80×80像素。您的CSS將其擴展到640x480，這意味着您只需拉伸您正在繪製到畫布的位圖即可。（這說明你的模糊）

訣竅實現你的比例是在這裏：

var scaleFactor = 10; 
for(i = 0; i < 6400; i++) 
{ 
    d = random()*256|0; 
    val = array[d]; 
    viewbmd.fillStyle = "rgb(" + val + ", " + val + ", " + val + ")"; 
    //fillrect draws your "pixels", 
    viewbmd.fillRect(i%80*scaleFactor, (((i)/80)|0)*scaleFactor , scaleFactor, scaleFactor); 
}

爲了模擬繪製BIX像素，乘以你用相同的繪製矩形的x/y位置確定其大小的數字（請參閱scaleFactor）。

在這個例子中，我畫的是「像素」，實際上是10x10「點」。

這樣，初始圖片繪製正確。

雖然我們遇到了麻煩，但第二個是flipSomePixels，因爲它只是從我們之前繪製的位圖中獲取實際像素，並開始翻轉這些像素，所以我們需要一個類似的技巧來在那裏繪製更新的假像素。

::更新::

感謝肯，我上了如何在一個「更簡單」的方式實現這一點的想法。我們可以將原始80x80的畫布從屏幕上拖出來，並在更大的畫布上展開。

雖然我們仍然需要取消調整css畫布的大小，因爲調整canvas元素的大小仍然會導致模糊縮放發生。相反，我們讓畫布640x640，並告訴它做清晰的圖像渲染這樣的：

-CSS：

canvas{ 
    border:1px solid black; 
    image-rendering: optimizeSpeed;    
    image-rendering: -moz-crisp-edges;   
    image-rendering: -webkit-optimize-contrast; 
    image-rendering: -o-crisp-edges;    
    image-rendering: optimize-contrast;   
    -ms-interpolation-mode: nearest-neighbor; 
}

-html：

<canvas width="640" height="640"></canvas>

有關工作示例，請參閱http://jsfiddle.net/QTvpe/10/

來源

2013-07-16 16:22:40

，您好：感謝您的回覆。我感謝您的幫助。我認爲畫布是80X80，可以縮放到640X640？我嘗試添加新的腳本（使用scale = 8），但這並沒有解決模糊問題。對不起，這不是很熟練。也許，問題在於你所提到的：「我們遇到了麻煩，第二個是我們碰到了flipSomePixels，因爲它只是從我們之前繪製的位圖中獲取實際像素，並開始翻轉這些像素，所以我們需要類似的技巧來繪製更新了假象素。「不知道如何解決這個問題。請仍需要幫助。 – user1134527

對不起，也許我應該詳細闡述一下。畫布確實很小，並且被放大（看起來很可怕）。解決這個問題的最好方法是使畫布本身更大，不要縮放畫布，只畫出更大的方塊而不是單個像素。 –

我給出的代碼示例給出瞭如何做到這一點的粗略解釋 –

我不確定這是你試圖實現的，因爲圖像大大擴大，但是，你可以嘗試關閉圖像的抗鋸齒。如果這是你正在尋找的東西，這會給你以前的8位外觀。

context.webkitImageSmoothingEnabled = false;

，併爲Mozilla：

context.mozImageSmoothingEnabled = false;

也看到我的相關答案這裏查看完整的上下文：
Images in web browser are slightly blurred. How to disable it?

來源

2013-07-16 19:26:22 K3N

我所說的... –

謝謝你的這些建議。幫助我學習。我試着在CSS中使用這些。使顯示器非常小（80X80）。需要640X640沒有模糊。不幸的是，作爲一個腳本技能/理解能力非常有限的退休社會工作者，三年前沒有成功嘗試修復其他人的腳本。從來沒有得到它的工作正確。 – user1134527

我試圖使用較新的HTML5，這些電子學習課程的動畫練習畫布，如果可能，請從Flash緩慢轉換它們。然後可以部署在更廣泛的設備上：允許更多人查看課程（旨在幫助他們改善健康狀況）。所以，我會繼續嘗試。有一天...... :) – user1134527

重寫javascript動畫以防止在瀏覽器中縮放/模糊

回答

相關問題