做一个最大的正方形
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;
