文章/答案/技术大牛

发布

社区首页 >问答首页 >两个html画布在浏览器窗口上水平居中

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

Stack Overflow用户

提问于 2015-07-31 12:34:03

回答 1查看 324关注 0票数 0

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

其目的是背景比前景画布和静态图像更大，因此将背景投影一次，而不是不断地呈现它，将节省资源。

我希望这两个对象始终以浏览器窗口的中央为中心(即使窗口被调整大小)，并且我需要一些CSS的帮助。目前，这两幅油画有相同的高度，但没有宽度。

请允许我指出，每次调整浏览器窗口的尺寸时，都会调整画布的大小(按高度进行缩放)，这样就不会对场景的垂直部分进行裁剪/裁剪，但横向上则没有这样的限制。因此，当浏览器窗口比画布的宽度变小时，就会按比例裁剪左、右，并保持在页面中间的中心。

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

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

JS代码预览

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

提前谢谢你！

html

canvas

easeljs

javascript

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-07-31 12:44:23

以下是工作，我将在下面包含一个代码片段实现。

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

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);				
	/*}*/
}

*{
	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%);
}

<!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>

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

不过，就像@Rvervuurt说的那样，如果它不使用canvas的任何特性，你最好把它画成静态图像，并将其渲染为背景--以background-position: 50% 50%为中心的图像--叠加代码仍能工作，但页面会更快一些，因为根本就没有画布可以跟踪。

更新:使用<img />和/或background-image

下面是使用简单图像或背景图像的实现。我简化了您的代码(将画布简化为一个绘制的正方形，以便一切都尽可能明显)。

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();

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

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div id="bg_back" style='background-image: url(https://placeholdit.imgix.net/~text?txtsize=75&bg=880000&txtclr=green&txt=1000×1000&w=1000&h=1000);'></div>
  <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=A+Large+Background&w=1000&h=800" id="img_back" height="256" width="512" />
  <canvas id="canvas_front" height="256" width="384"></canvas>
</body>
</html>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/31746335

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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