Как отрегулировать изображения холста относительно окна просмотра

Я пытаюсь сделать изображение слоя холста восприимчивым к фоновому изображению холста, оба показывают хорошее реагирование, но моя проблема в том, что я хочу исправить изображение слоя в центре экран, какой размер экрана. В настоящее время при повторной калибровке изображение моего слоя начинает менять свою позицию, что нежелательно. Я хочу, чтобы установить слой изображение в центре экранаКак отрегулировать изображения холста относительно окна просмотра

вот мой HTML код

<body id="body"> 

    <canvas id="myCanvas" style="position:relative;"></canvas> 


    <img src="background.jpg" id="background" /> 
    <img src="s01.jpg" id="layer" />

вот мой CSS

#layer { 
    position: fixed; 
    top: 0px; 
    margin-left: -160px; 
} 

img{ 
     width:auto; 
     height:auto; 
     max-width:100%; 
     max-height:100%; 
    } 

body { 
     /*background: #E9E9E9;*/ 
     color: #333; 
     font: 1em/1.3em "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif; 
     text-shadow: rgba(255,255,255,0.8) 0 1px 0; 
     text-align: center; 
     overflow:hidden; 
    } 
    html, body { 
     width:100%; 
     height:100%; 
     margin:0; 
    }

и вот мой JS

(function() { 
    var 

     htmlCanvas = document.getElementById('myCanvas'), 
     context = htmlCanvas.getContext('2d'); 

    var background = document.getElementById('background'); 
    context.drawImage(background, 0, 0, window.innerWidth, window.innerHeight); 

    initialize(); 

    function initialize() { 
     window.addEventListener('resize', resizeCanvas, false); 
     resizeCanvas(); 
    } 

    function redraw() { 
     context.strokeStyle = 'transparent'; 
     context.lineWidth = '5'; 
     context.strokeRect(0, 0, window.innerWidth, window.innerHeight); 
     var background = document.getElementById('background'); 
     context.drawImage(background, 0, 0, window.innerWidth, window.innerHeight); 
     var imageObj = new Image(); 
     imageObj.onload = function() { 
      context.drawImage(imageObj, 0, 0, window.innerWidth, window.innerHeight); 
     }; 
     imageObj.src = 'background.jpg'; 

    } 
    function resizeCanvas() { 
     htmlCanvas.width = window.innerWidth; 
     htmlCanvas.height = window.innerHeight; 
     redraw(); 
    } 
})();

Я застрял здесь последние 3 дня, все еще не могу понять это

источник

2016-01-07 Usama Saeed

В моем скрипте не было проблем. Это хорошо написано. Но вам просто нужно применить это правило CSS для центрирования слоя в окне:

#layer { 
    position: fixed; 
    top: 0px; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    margin: auto; 
}

demo

источник

2016-01-07 05:47:44

Да, Его довольно полезно, но теперь проблема ширина изображения слоя, вы можете сказать, как исправить он автоматически с экраном –

определяет максимальную ширину в процентах. –

Как отрегулировать изображения холста относительно окна просмотра

ответ

Смежные вопросы