Question

我试图在彼此之上使用两个html5画布对象，以便将其中一个用作静态背景，另一个作为所有操作发生的阶段。

目的是背景大于前景画布和静态图像，因此将背景投影一次而不是不断渲染它将节省资源。

我希望两个对象始终水平居中在浏览器窗口的中心（即使窗口调整大小），我需要CSS的一些帮助。目前这两幅画布的高度相同但宽度不同。

让我指出，每次调整浏览器窗口大小时都会调整画布大小（按高度缩放），以便垂直地不剪切/裁剪场景的任何部分，但水平地，没有这样的限制。因此，当浏览器窗口的宽度小于画布时，get会按比例左右裁剪，并且它们会一直居中在页面中间。

我的代码几乎完成，因为它会缩放所有对象并根据浏览器窗口大小裁剪场景，但我无法找到一种方法来水平居中画布。

如果您想在JS Bin中测试代码，我建议您选择实时预览模式（单击最右侧的箭头按钮）以全屏查看结果，并使用窗口大小进行播放。

JS Bin code preview

以下是当前输出和所需输出的可视结果

提前谢谢！

Answer 1

以下是有效的，我将在下面提供一个代码段实现。

canvas#front, canvas#back {
    position: absolute;
    /* Use calc to make sure that browser without transform support
     * (that therefore also dont support calc) don't 
     * actually move your elements. */
    left: calc(50%);
    top: calc(50%);
    /* Don't forget to prefix. */
    transform: translate(-50%,-50%);
    z-index: 1;
}
canvas#back { z-index: 0; }

＆＃13;

document.documentElement.style.overflow = 'hidden';
window.addEventListener('resize', function(){resizeCanvas();}, true);

var sscale = 1.0;
canvas_back = document.getElementById("canvas_back");
stage2 = new createjs.Stage(canvas_back);	
stage2.autoClear = true;
my_ticker2 = createjs.Ticker.on("tick",stage2); 
			
this.back = new createjs.Bitmap("http://i.imgur.com/VcDqpBW.png"); 
stage2.addChild(this.back);
			
canvas_front = document.getElementById("canvas_front");
stage = new createjs.Stage(canvas_front);	
stage.autoClear = true;
createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED; createjs.Ticker.framerate = 120;
my_ticker = createjs.Ticker.on("tick",stage); 
this.ob1 = new createjs.Bitmap("http://i.imgur.com/3toyiJo.png"); 
this.ob1.x=Math.floor(canvas_front.width/2); 
this.ob1.y = Math.floor(canvas_front.height/2);
stage.addChild(this.ob1);
resizeCanvas();

function resizeCanvas()
{
	var SCREEN_WIDTH = window.innerWidth;
	var SCREEN_HEIGHT = window.innerHeight;//window.screen.availHeight;
	console.log("SCREEN_WIDTH, SCREEN_HEIGHT, canvas_back.height", SCREEN_WIDTH, SCREEN_HEIGHT, canvas_back.height);
	ratio = (SCREEN_HEIGHT/canvas_back.height);

	sscale = (sscale*ratio); console.log("ratio,sscale : ", ratio,sscale);
			
	stage.scaleX = sscale;
	stage.scaleY = sscale;
	canvas_back.width = Math.min(canvas_back.width*ratio);
	canvas_back.height = Math.min(canvas_back.height*ratio);
	console.log("canvas width/height : " , canvas_back.width, canvas_back.height);
	stage2.scaleX = sscale;
	stage2.scaleY = sscale;
	
	canvas_front.width = Math.min(canvas_front.width*ratio);
	canvas_front.height = Math.min(canvas_front.height*ratio);
			
	/*if(canvas_back.width > SCREEN_WIDTH)
	{	*/
		console.log("canvas width bigger than screen width");
		document.documentElement.scrollLeft = ((document.body.scrollWidth - document.body.clientWidth) / 2);
		document.body.scrollLeft = ((document.body.scrollWidth - document.body.clientWidth) / 2);				
	/*}*/
}

＆＃13;

*{
	margin: 0;
	padding: 0;
}

html, body {
  height: 100%;
}

#canvas_back, #canvas_front {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script type="text/javascript" src="https://code.createjs.com/createjs-2015.05.21.min.js"></script>
</head>
<body>
  <canvas id="canvas_back" height="256" width="512"> asdf </canvas>
  <canvas id="canvas_front" height="256" width="384"> asdf </canvas>
</body>
</html>

＆＃13;

请记住，我还高度简化了HTML以仅包含画布，这是为了避免任何混淆，但该技术应该有效。 Lastyle，在定义width和height时，只使用%作为一个单位，否则只使用一个数字，因为它会自动使用pixels。它看起来更干净。

就像@Rvervuurt所说的那样，如果它不使用canvas的任何功能，你也可以将其绘制为静态图像并将其渲染为背景图像，以{{为中心1}} - 重叠的代码仍然可以工作，但是你的页面会变得更加快捷，因为根本没有画布可以跟踪。

更新：使用`background-position: 50% 50%`和/或`<img />`

以下是使用简单图像或背景图像的实现。我稍微简化了你的代码（使画布简单成为一个绘制的正方形，以便尽可能地显示所有内容）。

＆＃13;

background-image

＆＃13;

var cf = document.getElementById('canvas_front');
cf.width = 100;
cf.height = 100;
var ctx = cf.getContext('2d');
ctx.rect(0,0,100,100);
ctx.stroke();

＆＃13;

* { margin: 0;padding: 0; }

html, body { height: 100%; }

#canvas_front, #img_back {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 2;
}
#canvas_back { display: none; }
#img_back { z-index: 1; }
#bg_back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: yellow;
  background-position: 50% 50%;
  background-size: cover;
  z-index: 0;
}

＆＃13;

两个html画布在浏览器窗口上水平居中

1 个答案:

更新：使用`background-position: 50% 50%`和/或`<img />`

两个html画布在浏览器窗口上水平居中

1 个答案:

更新：使用background-position: 50% 50%和/或<img />

更新：使用`background-position: 50% 50%`和/或`<img />`