如何制作一个动态画布/网格/行/列，可以调整到浏览器的宽度和高度，同时保持纵横比？

Question

I am really new to javascript, css, and html, but i want to learn. The problem is, its not clear the direction i should head in. I want to make a game site that can play a few games. Im trying to make a game board that will have a dynamic size based on the height and/or width of the browser while maintaining the aspect ratio of its original. It is going to have elements inside of it which must also decrease their size proportionately to its parent. I have tried using bootstrap 4, with its col, row, and container classes. I am struggling to make it work with the container class. I have recently come across the , which I saw someone use to achieve this. can anyone give me a better idea whats going on here?

one example is this website https://colonist.io/ just click play game, at the top, manipulate the browser height and width, you will see how it resizes, and all child elements. this is the exact effect i am looking for. thanks.

Answer 1

Well.. maybe this will suit your needs better

var scale = {}, isInitial = true;

window.onresize = function() {
    // make sure the ctx variable is global or visible in current scope in your code
    ctx.canvas.width = window.innerWidth;
    ctx.canvas.height = window.innerHeight;
    if (isInitial) {
       isInitial = false;
       scale.width = ctx.canvas.width;
       scale.height = ctx.canvas.height;
    } else {
       scale.x = window.innerWidth / scale.width, scale.y = window.innerHeight / scale.height;
       ctx.scale(scale.x, scale.y);

       // redraw your canvas graphics 
    }
}

Please ensure that:

• Your canvas position id fixed
• Canvas top and left properties set to 0
• ctx variable is globally accessible