画布位置锁定 [关闭]

Question

情况：我体内有一张背景图片。画布上下文被绘制在上面。然后我使用“xor”全局复合操作在画布上创建形状，以排除重叠区域并使其透明。这会在画布中创建切口，您可以通过这些切口看到部分背景。到目前为止，一切都很顺利，只有一个小例外。

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

我想要什么：我正在寻找一种方法来保护画布在背景图像的尺寸（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>

CSS：

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 似乎无关紧要。如果有人需要，我会发布它，但这更像是一个风格问题。任何意见将不胜感激！

Answer 1

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

Answer 2

可能想尝试在画布包装上添加绝对定位，左侧 50% 和一半宽度 (675/2) 处的负边距。

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

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