                        课程
                    
                        /前端开发
                        
                            /Html5
                        
                        /Canvas绘图详解

画布重叠两个canvas怎么重叠在一起

两个canvas怎么重叠在一起

慕斯3556369

2017-12-09

源自：Canvas绘图详解 8-6

关注问题我要回答

10911

操作

收起

3 回答

Riddle2000
2020-02-13

赞！好用

0 回复有任何疑惑可以回复我~

收起回答

Tom_Kwok
2017-12-22

  <!-- 上面的HTML结构有误 -->
  <div class="canvas-wrapper">
      <canvas id="canvas-1" class="canvas"></canvas>
      <canvas id="canvas-2" class="canvas"></canvas>
  </div>

0 回复有任何疑惑可以回复我~

收起回答

Tom_Kwok
2017-12-22

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>canvas重叠</title>
    <style>
      .canvas-wrapper {
        position: relative;
        width: 600px;
        height: 600px;
        border: 1px solid black;
      }
      .canvas {
        width: 400px;
        height: 400px;
      }
      #canvas-1 {
        background-color: #058;
        top: 0;
        left: 0;
      }
      #canvas-2 {
        background-color: red;
        top: 200px;
        left: 200px;
      }
      .canvas {
        position: absolute;
      }
    </style>
  </head>
  <body>
    <div>
      <canvas id="canvas-1"></canvas>
      <canvas id="canvas-2"></canvas>
    </div>
  </body>
</html>

0 回复有任何疑惑可以回复我~

收起回答