纯canvas页面自适应方法
2017-07-17 本文已影响0人
记忆是条狗
var scale = 1 / window.devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
function stageBreakHandler(event)
{
if(stageWidth!=document.documentElement.clientWidth||stageHeight!= document.documentElement.clientHeight)
{
stageWidth = document.documentElement.clientWidth;
stageHeight = document.documentElement.clientHeight;
//外部元素自适应
canvas.width = stageWidth ;
canvas.height = stageHeight;
//内部元素自适应
stageScale = stageWidth/750;//宽度自适应;
// stageScale = stageHeight/1206;//高度自适应两者选一
container.scaleX = stageScale;
container.scaleY = stageScale;
// bitmap.x = (stageWidth - 750*bitmap.scaleX)/2;//高度自适应时解开这个注释 保证图片居中
if(leftBtn)
{
leftBtn.x = stageWidth - 100;
}
}
stage.update();
}
注意:上面代码的750和1206是素材的大小不是屏幕的大小,也就是你自适应的素材有多大就写多大