如何制作畫布動畫比例（HTML5）

Question

我有一個動畫/畫布繪圖，其中像素是硬編碼的，而不是相對的。 如何使瀏覽器的大小和畫布/繪圖/動畫縮放？

我曾想過要根據瀏覽器或畫布的寬度和高度來設置像素值，但是我不知道這是一個好主意。

有小費嗎？

PS：我沒有發布代碼，因為它差不多有1000行，但是如果需要，我可以發布一部分。

Answer 1

縮放以適合，填充或拉伸

幾乎每個設備的顯示縱橫比都不同，然后每個設置將僅使用部分或全部可用屏幕來顯示窗口。

您唯一真正的選擇是如何適應可用空間。

正如前面的答案指出的那樣，您可以使用innerWidth，innerHeight獲得可用的大小。

因此，假設您具有寬度和高度。

 var width = innerWidth; // or canvas width
 var height = innerHeight; //

默認分辨率

我假設您的應用具有固定的外觀和最佳的分辨率。 為了簡化適應您的應用程序，您需要保持存儲在代碼中的最佳分辨率。

var defaultWidth = ?
var defaultHeight = ?

為了適應顯示，您需要獲得一個在應用程序開始時設置的比例，並在顯示尺寸更改時進行調整。 您還將需要原點。 坐標0,0與將要移動的某些解一樣。

這些值都是相對於應用正在渲染的當前顯示而言的。 它們將獲取您的原始坐標，並使它們與設備像素一致。

var displaySetting = {
    scaleX : ?,
    scaleY : ?,
    originX : ?,
    originY : ?,  
}

適合，填充或拉伸

3個最基本的選項。

• 拉伸至適合。 您拉伸渲染以適合顯示效果，但失去了外觀。
• 縮放以適合。 您可以縮放渲染，以保持外觀，並且所有顯示都是可見的。 根據設備的不同，可能會在側面或頂部和底部留有空間。
• 縮放以填充。 您可以縮放渲染以使其充滿設備屏幕，但最終可能會在側面或頂部和底部修剪一些或渲染。

。

function getDisplayTransform(type, displaySetting){
    displaySetting = displaySetting || {};
    // first get scales
    if(type === "stretch"){
        displaySetting.scaleX = width / defaultWidth;
        displaySetting.scaleY = height / defaultHeight;
    } else if (type === "fit") {
        displaySetting.scaleX = Math.min(width / defaultWidth, height / defaultHeight);
        displaySetting.scaleY = displaySetting.scaleX;
    } else {  // type to fill
        displaySetting.scaleX = Math.max(width / defaultWidth, height / defaultHeight);        
        displaySetting.scaleY = displaySetting.scaleX;
    }
    // now that the scale is set get the location of the origin. which is 
    displaySetting.originX = width / 2 - defaultWidth * 0.5 * displaySetting.scaleX;
    displaySetting.originY = height / 2 - defaultHeight * 0.5 * displaySetting.scaleY;
    // Note that for scale to fill the origin may be of the display or canvas
    return displaySetting;
}

所以現在您只需要設置新的坐標系

ctx.setTransform(
     displaySetting.scaleX,0,
     0,displaySetting.scaleY,
     displaySetting.originX,displaySetting.originY
);

因此，為了騰出空間以使用getDisplayTransform("fit",displaySetting); 或使用getDisplayTransform("fill",displaySetting); 頂部和底部或左側和右側都有一些剪裁。

設置變換后，即可正常渲染。 您不必更改代碼中的坐標，就代碼而言，線寬，字體大小，陰影偏移都保持不變。

Answer 2

將畫布的width和height分別設置為window.innerWidth和window.innerHeight 。 因此，代碼將類似於（在JS中）：

var canvas = document.getElementById('my_canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

上面的代碼只會根據窗口的寬度和高度更改畫布大小。 要設置繪圖/動畫比例，您需要動態設置其位置/大小（相對於窗口的寬度/高度），而不是硬編碼。