如何将画布置于背景图像的顶部 [英] How to center a canvas on top of a background image

问题描述

我有一个图像，我想用作文档背景，并在其上放置一个canvas元素。

原因是背景是大（2048x1024），如果我把它放在画布中，它将在每一帧浪费资源的情况下重绘。

 < div id = container> 
< image class =img1src =./assets/game.jpgid =backk/> 
< canvas id =canvaswidth =1366height =1024>没有画布支持！< / canvas> 
< / div> 
 
 container {
 position：relative; 
 width：100％; 
 margin：auto; 
 
} 
 canvas {
 display：block; 
 margin：auto; 
 position：absolute; 
 top：0; 
 left：0; 
 z-index：1; 
} 
 img1 {
 position：absolute; 
 top：0; 
 left：0; 
 z-index：0; 
} 
  

使用上面的标记，我的CSS应该是什么，如下图所示：

解决方案

具有绝对位置的解决方案：

  #container {border：2px solid red; width：350px; height：250px;位置：相对; padding：10px;}＃container .img1 {position：absolute; width：350px; height：250px;}＃container #canvas {position：absolute;轮廓：2px实心黑色; top：10px; left：60px;}  

 < div id = > < image class =img1src =https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Image-1&w=350&h=250 id =back/> < / canvas>< / div>  

您也可以使用 margin：0 auto $ b或 display：inline-block 和 text-align：center c $ c> transform：translate（...）

例如：

  #container {
 border：2px solid red; 
 width：350px; height：250px; 
 position：relative; 
 padding：10px 
} 
 #container .img1 {
 display：block; 
 width：350px; height：250px; 
} 
 #container #canvas {
 outline：2px solid black; 
 transform：translate（50px，-250px）; 
} 
  

I have an image that I want to use as a document background, and place on top of it a canvas element.

The reason is that the background is large (2048x1024) and if I place it inside the canvas it will be redrawn on every frame wasting resources.

<div id="container">
    <image class = "img1" src = "./assets/game.jpg" id= "backk"/>
    <canvas id="canvas" width="1366" height="1024">No Canvas support!</canvas>    
</div>

        container {         
        position: relative;
        width:100%;
            margin : auto;

        }
    canvas{
        display:block;
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        z-index:1;
        }
    img1{
        position: absolute;
        top: 0;
        left: 0;
        z-index:0;          
    }

Using the above markup, what should my CSS be in order to get the result seen also in the following picture:

解决方案

Solution with absolute positions:

#container {
  border: 2px solid red;
  width: 350px; height: 250px;
  position: relative;
  padding: 10px;
}
#container .img1 {
  position: absolute;
  width: 350px; height: 250px;
}
#container #canvas {
  position: absolute;
  outline: 2px solid black;
  top: 10px; left: 60px;
}

    <div id="container">
      <image class="img1" src="https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Image-1&w=350&h=250" id="back"/>
      <canvas id="canvas" width="250" height="250">No Canvas support!</canvas></div>

You can also achieve this without absolute positions using margin: 0 auto, or display: inline-block and text-align:center, or with flex positions, or with transform: translate(...)

Ex:

#container {
  border: 2px solid red;
  width: 350px; height: 250px;
  position: relative;
  padding: 10px;
}
#container .img1 {
  display: block;
  width: 350px; height: 250px;
}
#container #canvas {
  outline: 2px solid black;
  transform: translate(50px, -250px);
}

这篇关于如何将画布置于背景图像的顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！