做一个最大的正方形

viewport

法1: JS实现法

innerHeight,outerHeight,screenHeight,offsetHeight,clientHeight,scrollHeight详见视口的宽高与滚动高度
监听window的resize事件, 将长宽赋值为innerSize的最小值
参考代码如下:

window.addEventListener("resize", this.handleWindowResize.bind(this), false);
this.handleWindowResize = function () {
        console.log("Window Size: "+window.innerWidth+" * "+window.innerHeight);
        var cvs_border = window.innerHeight > window.innerWidth ? window.innerWidth : window.innerHeight;
        this.cvs.height = this.cvs.width = cvs_border;
    };

法2: CSS实现法

将CSS宽高都以vmin为单位
vmin是什么?
参考代码如下:

<div class="pad">
    <canvas class="stage"></canvas>
</div>
<style scoped>
.pad {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100vmin;
  height: 100vmin;
}
.stage {
  width: 100%;
  height: 100%;
}
</style>

整数

// With a bitwise or.
rounded = (0.5 + somenum) | 0;
// A double bitwise not.
rounded = ~~ (0.5 + somenum);
// Finally, a left bitwise shift.
rounded = (0.5 + somenum) << 0;