Css 帆布位置锁

情况：我的身体里有一个背景图像。一个画布上下文被绘制在上面。然后，我使用“xor”全局合成操作在画布上创建形状，以排除重叠区域并使其透明。这将在画布中创建剪切，通过剪切可以看到部分背景。到目前为止，一切进展顺利，只有一个小例外

问题：我真的很喜欢我的网站不固定在某个位置的方式。它是灵活的。它不完全适合移动，但适合1024x768的页面。打破布局的唯一方法是缩小窗口。抓住浏览器窗口的左侧并拖动它以将窗口缩小到1000px或更小时，画布中的剪切将向右移动，并显示背景图像的错误部分

我想要什么：我正在寻找一种方法，在不失去太多灵活性的情况下，在背景图像（675 X 600像素区域）的尺寸上保护画布。这个问题最简单的解决办法是最可取的

我的布局很简单

HTML:

<div id="container">
    <a href="#" id="LftButton" class="hidden">
        <img alt="Previous Frame Button" src="imageFiles/arrowButtonLft.png" />
    </a>
    <a href="#" id="RtButton" onClick="nextWindow()" class="hidden">
        <img alt="Next Frame Button" src="imageFiles/arrowButtonRt.png" />
    </a>
    <div id="canvasWrapper">
        <canvas id="myCanvas" width="675" height="600">
            <p>Your browser doesn't support canvas.</p>
        </canvas>
    <script src="aboutMeScript.js" type="text/javascript"></script>
    </div>
</div>

body{
padding:0px;
height:775px;
width:985px;
margin:auto;
font-family:"Courier New", Courier, monospace;
font-size:12px;
background-repeat:no-repeat;
background-position:50% 145px;
background-image:url(imageFiles/bubsAndSqs.gif);
font-weight:normal;
}
#container{
width:985px;
height:600px;
clear:both;
margin:auto;
}
#myCanvas{
width:675px;
height:600px;
float:left;
}
#canvasWrapper{
width:675px;
height:600px;
margin:auto;
}
#RtButton{
float:right;
margin-right:34px;
}
#LftButton{
float:left;
margin-left:34px;
}
#RtButton, #LftButton{
margin-top:200px;
}

---

在这里，Javascript似乎无关紧要。如果有人需要看，我会贴出来，但这更像是一个风格问题。任何意见都将不胜感激

可能希望尝试在画布包装上添加绝对定位，左50%，负边距为宽度的一半（675/2）

---

我只是想在脑海中想象一下，我想你的意思是，一旦浏览器变得太小，无法容纳整个画布宽度，它就不再保持居中，并开始在右侧溢出，与浏览器左侧对接，而背景图像继续保持居中。如果我在这里走错了方向，那么也许你可以发布一个示例链接

我将背景图像粘贴到画布包装中。

不，这不起作用b/c它从一开始就将我的画布放置在错误的位置。绝对定位是可能的解决方案。如果通过向右拖动浏览器的左边缘使浏览器变小，则BG img将保持不变，画布将从屏幕向右移动。类似地，如果将浏览器的右边缘向左拖动，画布将保持不变，而BG img将从屏幕向左移动。我不确定我是否完全理解这里发生的事情。我需要读更多！这是我实际上决定将背景图像放入画布包装器中的一部分。谢谢你的帮助！

#canvasWrapper{
    width:675px;
    height:600px;
    position: absolute;
    left: 50%; /* if you want vertical centering */
    top: 50%;
    margin: -300px 0 0 -337px;
}