如何制作画布动画比例（HTML5）

Question

I have an animation/canvas drawing where the pixels are hard coded and not relative. How do I make it so that the canvas and the drawing/animation scales with the browser size?

I thought of making the pixel values relative to the width and height of either the browser or the canvas but I don't know if it's a good idea.

Any tips?

PS: I didn't post the code because it is almost 1000 lines long but if required I could post part of it.

Answer 1

Scale to fit, fill, or stretch

Almost every device has a different display aspect ratio, and then each setup will use only part, or all of the available screen to display the window.

The only real choice you have is how to adapt to fit the available space.

As the previous answer points out you can get the available size with innerWidth, innerHeight.

So lets assume you have that as width and height.

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

Default resolution

I am assuming you app has a fixed aspect and an optimal resolution. To make it simple to adapt your app you need to keep the optimal resolution stored in code.

var defaultWidth = ?
var defaultHeight = ?

To adapt to displays you will need to get a scale that you set at the start of the app and adjust when the display size changes. You will also need the origin. the point where coordinate 0,0 is as for some solutions that will move.

These values are all relative to the current display that app is rendering on. They will take you native coordinates and make them conform to the device pixels.

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

Fit, fill, or stretch

The 3 most basic options.

• Stretch to fit. You stretch the rendering to fit the display but lose the aspect.
• Scale to fit. You scale the rendering so that you maintain the aspect and all of the display is visible. Thought depending on the device you may have empty space on the sides or top and bottom.
• Scale to fill. You scale the rendering so that it fills the device screen but you may end up clipping some or the rendering on the sides or top and bottom.

.

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;
}

So now you just have to set the new coordinate system

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

So to fit with space to spare use getDisplayTransform("fit",displaySetting); or to fill use getDisplayTransform("fill",displaySetting); which will have some clipping top & bottom or left & right.

Once the transform is set you render as normal. You don't have to change the coordinates in your code, Line widths, font sizes, shadow offsets all remain the same as far as you code is concerned.

Answer 2

Set the canvas width and height to window.innerWidth and window.innerHeight respectively. So, the code would be like (in JS):

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

Above code will only change the canvas size according to window width and height. To set the drawing/animation scale, you need to set its position/size dynamically (respect to the window width/height), not hard coded.