果你發現，剛買來的電腦在運行一些程序的時候，程序界面總有一種發虛的感覺，那不是電腦屏幕的問題，也不是系統的問題，而是Windows 10的縮放機制不完善的問題。

在很多人的印象中，Windows系統對于高分屏的支持一直不佳，尤其是Windows 8階段，很多傳統exe應用的界面在系統的縮放機制下變得非常模糊，可用性很低。到了Windows 10，這一情況有沒有改觀呢？

這件事僅僅微軟用力是不行的，還需要第三方軟件對其進行優化。從筆者使用Windows 10來看，第三方軟件已經沒有那么不堪了，但與macOS的水平還有很大差距。

Windows 10的縮放機制

要更改Windows 10的縮放，需要在桌面右擊，選擇顯示設置，在彈出的設置界面的“縮放與布局”能夠對縮放比例進行直接更改，操作比Windows 7要方便很多。

我們直接按照系統推薦的縮放比例設置就可以了，但偶爾會遇到圖標過大的情況。一般情況下，13.3英寸、1080P縮放比例設置為150%，14英寸、15.6英寸、1080P縮放比例設置為125%。這是推薦筆記本的縮放比例。

臺式機外接顯示器的話就不好說了，大家可以在設置中進行自行調整。需要注意一點，修改之后一定要注銷，不然可能會出現界面卡頓等情況。

對于多屏用戶而言，在調整縮放比例之前一定要看縮放比例對應的是哪塊屏幕。可以先點選屏幕之后再進行縮放調整，縮放過程中不會影響到其他屏幕。

本文屬于原創文章，如若轉載，請注明來源：Windows 10學院之初中（08） 縮放機制http://nb.zol.com.cn/682/6828341.html

礎部分

坐標系

畫布坐標、屏幕坐標的概念

• 屏幕坐標，絕對坐標，類似于css中的絕對定位
• 畫布坐標，類似于css中的相對定位，還要考慮縮放

幾何變換：平移、縮放、旋轉

• 平移，位置移動，形狀、相對位置不變
• 縮放，位置（相對屏幕坐標）和大小都發生變化
• 旋轉，位置旋轉，形狀、相對位置不變

Canvas 中的所有幾何變換針對的不是繪制的圖形，而是針對畫布本身，也就是說，當移動、縮放、旋轉畫布之后，新的坐標系只對新的操作生效

參考：

• Canvas 幾何變換 - Canvas 基礎教程 - 簡單教程，簡單編程
• Canvas 平移 translate() - Canvas 基礎教程 - 簡單教程，簡單編程
• Canvas 縮放 scale() - Canvas 基礎教程 - 簡單教程，簡單編程
• Canvas 旋轉 rotate() - Canvas 基礎教程 - 簡單教程，簡單編程

繪圖步驟

基礎繪圖三步法

1. 獲取canvas對象
2. 獲取上下文環境對象context
3. 開始繪制圖形。

示例代碼

const canvas = document.getElementById("canvas");
const context = convas.getContext("2d");
context.fillRect(100, 100, 50, 50);

通用繪圖步驟

1. 保存畫布（狀態），context.save();
2. 畫布操作，context.transform（疊加） 或者 context.setTransform（不疊加）
3. 設置樣式，繪制圖形
4. 恢復畫布（狀態），context.restore();

圖形變換基本操作

1. 清空畫布，context.clearRect
2. 保存狀態，context.save
3. 畫布操作，doTransform
4. getShapeList and forEach
5. 恢復狀態，context.restore

Canvas性能

Canvas的繪制和html的繪制是不一樣的，html的繪制是增量的，當變化時，只會重新繪制變化的部分，沒有變化的部分是不會重新繪制的，但是canvas不一樣，每次都是全量繪制的，如果一個canvas里有很多圖形，當改變一個圖形時，需要重新繪制所有圖形才可以（當然，可以用clearRect擦除部分區域，但一般很少這么用）。

了解canvas的繪制規則之后，就很容易發現性能問題，如果canvas上繪制了大量的圖形（成千上萬個），每次重繪就需要很長的時間，如果重繪的頻率很高，那么就會有性能問題

那么如何解決這個問題呢，目前有以下幾種方案

1. 使用圖層
2. 使用臨時圖層
3. 使用webworker或wasm
4. 使用webgl

使用圖層

圖層的概念來自于PS，每一個圖層都是一個canvas，既然在一個canvas上繪制太多圖形會有性能問題，那么就分幾個圖層，每次僅重新繪制其中一個圖層，每個圖層的圖形都不會很多，那么即使重繪的頻率很高，也不會有性能問題。圖層的概念圖如下：

代碼實現

用一個父元素作為容器，把所有的元素設置成一樣的寬高并放在里面重疊。

<div class="container">
    <canvas width="500" height="500"></canvas>
    <canvas width="500" height="500"></canvas>
    <canvas width="500" height="500"></canvas>
    <canvas width="500" height="500"></canvas>
    <canvas width="500" height="500"></canvas>
</div>

使用臨時圖層

繪制是很耗性能的，如果每次都清空畫布然后重新畫一次，那么性能會消耗很大（即使分了幾個圖層），我們應區分“變”與“不變”的部分，只對“變”的部分重新渲染，“不變”的部分不渲染，將經常變化的部分抽離到臨時圖層，這樣僅需要渲染臨時圖層，臨時圖層有幾種實現思路，一種是使用操作圖層（俗稱高性能圖層），一種是使用隱藏圖層（不繪制到界面上的）

高性能圖層

一般高頻(實時響應鼠標、鍵盤等事件）的操作會放在高性能圖層，等操作完成之后，再將最終結果保存到其它圖層，比如繪制、拖拽、縮放一個（或一批）shape

隱藏圖層

有些圖層是不用給用戶看的，這些canvas僅存在于內存中，不會插入html的dom中，用完就銷毀，比如常見的canvas to image。

還有一種實現方式是離屏渲染(OffscreenCanvas)，先在一個offCanvas操作，然后再將結果渲染到界面上（有點像虛擬dom操作），一般會結合webworker或webassembly

const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
// 繪制圖片，或其它操作
context.drawImage();
// 轉成base64圖片
convas.toDataUrl();

使用webworker或wasm

影響canvas性能的除了繪制頻率，還有一個重要的是像素點操作，一般圖像處理會涉及到大量的像素點操作，如果放在主線程計算，那么會卡住其它操作，造成頁面卡頓，特別影響用戶體驗，這些涉及大量計算的一般會單獨開個線程來操作，而在瀏覽器中有這個能力的就只有webworker了。

有了webworker可能還不夠，因為始終是在js上執行，js執行效率天生就比其它語言慢，所以一般的會使用webassembly，執行效率比js快很多，而且還能用到更豐富的圖像處理庫

使用webgl

如果還有更高的性能要求，那么普通的2d canvas可能就無法滿足了，這個時候可以使用webgl，性能更高（當然學習成本也更高），再結合wasm，就可以有無限想象力了，鼎鼎大名的figma就是用webgl + wasm(rust)實現的，另外google doc在線文檔也使用了webgl，飛書文檔將來也會替換成wegbl，基于瀏覽器的渲染始終有諸多限制，一般有能力的都會實現自己的渲染引擎。

業務中圖片縮放的實現設計

假設canvas大小為（867，350）

圖片的大小為（768，576）

將上面這張圖片放到canvas中，圖片貼邊處理，也即圖片太大就縮小，圖片太小就放大。那么我們如何實現這種效果呢？

總結一下，總共分為幾步：

1. 計算畫布大小和圖片大小
2. 計算如果將圖片以原圖大小放入畫布中心，左上角的坐標
3. 將畫布坐標移動到圖片中心點
4. 將畫布放大或縮?。╯cale=Math.min(畫布寬度/圖片寬度，畫布高度/圖片高度)）
5. 重新移動畫布坐標到左上角
6. 繪制圖片（或圖形）

canvas的執行細節如下：