HTML5 畫布是否支持基於瀏覽器的縮放？

Question

我設置了一個簡單的畫布，上面畫了一個 fillText。 它看起來相當不錯，但是當我使用瀏覽器提供的縮放功能（Safari、Firefox）時，抗鋸齒看起來很難看。

我嘗試使用 scale() 提高網格，但它沒有幫助。

有什么方法可以在畫布上繪制，即使瀏覽器窗口放大，它看起來也很清晰？

---

截圖（無縮放）： http : //i.stack.imgur.com/CGWka.png

屏幕截圖（最大縮放）： http : //i.stack.imgur.com/vNPjF.png

Answer 1

您可以通過在繪制命令之前縮放畫布上下文來“縮放”畫布，從而平滑地以更大的尺寸繪制項目。 例如，請參閱我的這個示例，它允許您放大繪圖項目並查看默認演示中不可用的詳細信息。

瀏覽器縮放的問題在於 HTML5 畫布（如 JPG 或 PNG，與 SVG 不同）是基於單個像素的。 如果您以 10 像素繪制一個圓，然后告訴瀏覽器將其縮放到 50 像素，則瀏覽器無法“發明”數據來繪制平滑的圓。 它可以做的最好的事情是提供圖像插值以嘗試使“大像素”看起來更平滑。

解決方案

對於圖像，您可以拍攝具有大量像素（例如 1000x800）的圖片並告訴瀏覽器以不同的較小尺寸（例如 250x200）顯示它。 當瀏覽器放大時，它有更多的像素要顯示。 例如：

<img src="1000x800.jpg" style="width:250px; height:200px">

你可以用畫布做同樣的事情。 畫布中數據的像素數由height和width屬性指定（在 HTML 或 JavaScript 中）。 您可以單獨將 CSS顯示尺寸（如上所示）指定為較小的尺寸。 您甚至不需要修改現有的畫布繪圖代碼； 簡單地：

1. 通過特定因素（例如 4）調整畫布的height和width ，
2. 使用CSS將顯示高度和寬度設置回原來的大小，然后
3. 在所有其他繪圖命令之前，使用ctx.scale(4,4)放大您的上下文。

編輯：我在這里創建了一個示例：
http://jsfiddle.net/u5QPq/embedded/result/ （代碼）

這是放大后的樣子：

作為額外的好處，您的畫布也會打印得更流暢（以防有人砍樹）。

Answer 2

簡短的回答是否定的， canvas元素不會自動支持基於瀏覽器的縮放，即當您放大時，canvas 元素會看起來很難看。 您的瀏覽器根本無法繪制不存在的細節。

但是，在桌面上使用瀏覽器縮放時會發生三件事：

1. window.devicePixelRatio值會發生變化以反映新的物理與邏輯像素比。
2. 報告的寬度和高度（ window.innerWidth和window.innerHeight ）響應發生變化。
3. onresize事件觸發。

這意味着您可以監聽onresize事件，並根據新的像素比率和顯示尺寸重新創建畫布。 在桌面上，這將為您提供始終清晰的畫布元素，而無需以比所需分辨率更高的分辨率繪制畫布元素。

codepen 概念驗證

我還在 Medium 上寫了一篇文章，詳細介紹了這種方法，以及其他可用於使視力不佳的人更容易訪問畫布元素的技術： HTML 畫布和可訪問性

不幸的是，移動/平板電腦捏縮放的工作方式略有不同，這種方法在那里不起作用。 如果有人有另一種可以與捏縮放配合使用的方法，我很想聽聽他們的意見！