美文网首页
纯canvas页面自适应方法

纯canvas页面自适应方法

作者: 记忆是条狗 | 来源:发表于2017-07-17 18:21 被阅读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是素材的大小不是屏幕的大小,也就是你自适应的素材有多大就写多大

    相关文章

      网友评论

          本文标题:纯canvas页面自适应方法

          本文链接:https://www.haomeiwen.com/subject/dojqkxtx.html