纯canvas页面自适应方法

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是素材的大小不是屏幕的大小,也就是你自适应的素材有多大就写多大

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容