我一直在搞Javascript中的一些新想法，但我不擅長在Paint，Paint.NET等中製作非常詳細的圖像。問題是當我有64 * 64圖像或8 * 8，我希望它顯示640 * 640或16 * 16;圖像變得模糊。我見過很多其他論壇，人們會問這個問題或類似的問題，但我對這個問題比較陌生，不想在photoshop或其他方面讓圖像變大。在類似的說明中，我可以一次只顯示圖像的一部分，但是顯示的圖像比顯示的大，因此我不必製作同一圖像的多個圖像？在HTML中製作圖像較大，沒有模糊
放大後圖像變得模糊的原因是因爲它是光柵圖形（基於像素的圖像）而不是矢量圖形（基於路徑的圖像）。
當您嘗試放大柵格化圖像時，像素也會擴大，從而導致質量較低/模糊的結果（也稱爲「像素化」）。
矢量和光柵圖形之間的區別在於光柵圖形由像素組成，而矢量圖形由路徑組成。
來源：http://pc.net/helpcenter/answers/vector_and_raster_graphics
你不能沒有畫面放大顯示，變得模糊。您正在使用光柵圖像。光柵圖像是由像素組成的圖像。顏色被分配給每個單獨的像素。如果你放大圖片。每個像素將被縮放，以便在屏幕上佔用更多空間。這會導致圖像模糊。
下面是一個例子：
rrr
rbr
rrr
「R」 是一個紅色像素和 「b」 是一個藍色像素。尺寸是3 * 3。
如果試圖使尺寸大於3×3的大，可以說，6 * 6，出現這種情況：
rrrrrr
rrrrrr
rrbbrr
rrbbrr
rrrrrr
rrrrrr
隨着圖像放大，每個像素只變大。在較大的圖像中，每個2 * 2方格最初是原始圖像中的1個像素。現在用這個例子，新圖像並不模糊，因爲它只是一個正方形。但如果你有更復雜的圖像，它會變得模糊。
要解決您的問題，請使用矢量圖。矢量圖像與光柵圖像不同。它不是由像素組成的，而是由形狀和線條等構成的。每個形狀都有一個寬度，高度，x座標和y座標。一些形狀有更多變數。正因爲如此，矢量圖像可以無限放大而不會變得模糊。有時，當您放大矢量圖像時，質量甚至會變得更好！
下面是一個例子：
rrr
rbr
rrr
再次， 「R」 是一個紅色像素和 「b」 是一個藍色像素。假設這張圖片的寬度爲500.但是，你已經縮小到屏幕上顯示爲3 * 3的平方。在圖像的中心是一個藍色的圓圈。現在它看起來不像一個圓圈，因爲它只佔用屏幕上的一個像素。所以它看起來像方形。該圓圈具有固定的半徑。它位於圖像的中心。
讓我們放大：
rrrrr
rrbrr
rbbbr
rrbrr
rrrrr
圖像仍具有500 * 500的尺寸。它只是放大得更遠，以至於在屏幕上佔用5 * 5。但是這個圓看起來不像一個正方形，更像是一個十字。和一個3 * 3十字看起來更像是一個圓而不是1 * 1的正方形。
放大得越遠，圖像看起來就像一個圓形越多。但是，由於您正在使用光柵圖像，因此放大圖像會導致模糊的圖像。
要解決您的問題使用矢量圖像，而不是光柵圖像。
使用基於矢量圖形（SVG），而不是光柵位圖（JPG，PNG，GIF）。 關於SVG的好處是您可以添加CSS和JS以在網頁中與它進行交互。 查看本文有關to interface with the SVG
在您的示例中，從矢量圖像到柵格圖像的唯一區別是像素清晰顯示，並且不平滑。我很好，它是像素化的，它看起來似乎變得模糊大小，而不是像素了。 – Ren 2015-03-30 23:11:32