hanyeah

我们用做游戏的时候，舞台的宽高是固定的，这样我们才能专心来实现游戏的逻辑，游戏做好了之后，要放到不同的设备上运行，要面对各种分辨率，还要面对手机的屏幕旋转。游戏主舞台宽高是固定的，适应屏幕无非就是控制舞台的缩放和位移。

缩放以适应屏幕大小效果不好，做游戏很少会用；按宽或者按高等比缩放也不太实用；常用的就是等比缩放并居中。其实无论哪种方式，原理都是一样的。

好多引擎都提供了相应的方法来实现屏幕适配，使得我们可以专注做游戏。createjs没有深入研究，不知道有没有。

其实自己实现一下也很简单，而且自己写得还好把握，引擎提供的方法一旦出问题，会很麻烦。

屏幕适配应该属于传统html的范畴，canvas只是html5新增的众多标签中的一个，既然是html标签，和div等标签一样，也有style属性，也可以用css或js设置其样式。

不说废话了，直接上代码：

自己写可以熟悉熟悉原生的html，如果打算做html5游戏，很有好处。

作者很讨厌html的各种兼容性问题，如果哪位有兴趣，可以封装一个方法，和大家一起分享。

================================================

<canvas height="300" width="300" style="width:300px;height:300px;">浏览器暂不支持canvas</canvas>

canvas的width、height属性，以及style里边的width、height属性，有兴趣可以研究一下。

本页下面的实例，在谷歌浏览器下测试通过，不保证适应所有设备，所有浏览器。

现在一直用的方式。如果不是等比缩放，居中，改onCustomResize中代码即可。

//侦听加载完成事件，以及resize事件。
if (window.addEventListener) {   
	window.addEventListener('DOMContentLoaded', onCustomLoaded, false);   //firefox
	window.addEventListener('load', onCustomLoaded, false);
	window.addEventListener('resize', onCustomResize, false);
} else if (window.attachEvent)  {
	window.attachEvent('onload', onCustomLoaded);  //IE
	window.attachEvent('resize', onCustomResize);  //IE
}

var c_canvas=document.getElementById("canvas");//canvas对象
if(c_canvas)onCustomResize(null);
/**
 * 加载完成
 * @param  {[type]} e [description]
 * @return {[type]}   [description]
 */
function onCustomLoaded(e){ 
	console.log("loaded");
	c_canvas=document.getElementById("canvas");
	onCustomResize(null);
}

/**
 * 窗口尺寸变化时，等比缩放，居中canvas
 * @param  {[type]} e [description]
 * @return {[type]}   [description]
 */
function onCustomResize(e){ 
	//console.log("resize");
	if(!c_canvas)return;
	var w=parseInt(c_canvas.width);
	var h=parseInt(c_canvas.height);
	var size=getViewPortSize();
	var scale=Math.min(size.w/w,size.h/h);
	c_canvas.style.width=w*scale+"px";
	c_canvas.style.height=h*scale+"px";
	c_canvas.style.position ="absolute";
	c_canvas.style.left=(size.w-w*scale)/2+"px";
	c_canvas.style.top=(size.h-h*scale)/2+"px";
}

/**
 * 获取浏览器窗口的可视区域的宽度
 * @return {[type]} [description]
 */
function getViewPortSize() {
	var o={"w":NaN,"h":NaN};
	o.w=document.documentElement.clientWidth || document.body.clientWidth;
	o.h=document.documentElement.clientHeight || document.body.clientHeight;
    return o;
}

点击查看实例