Question

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

问题：我非常喜欢我的网站没有固定到某个位置的方式。它很灵活。它不是完全适合移动设备，但适合1024 X 768的页面。打破布局的唯一方法是缩小窗口。当您抓住浏览器窗口的左侧并拖动它以将窗口缩小到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>

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;
}

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

画布位置锁定

2 个答案: