2

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.

4

1 回答 1

0

好吧..也许这会更好地满足您的需求

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

请确保：

  • 您的画布位置 IDfixed
  • 画布top和left属性设置为 0
  • ctx变量是全局可访问的
于 2020-01-06T13:27:02.873 回答