Question

我的画布上有两个移动的矩形，一个是绿色，一个是红色。当它们位于相同位置并且您只能看到其中一个时，将始终显示红色矩形，而绿色矩形仅位于红色矩形之下。

如何才能实现绿色的一直显示在顶部？

Answer 1

没有任何代码很难分辨，但是如果您首先获得绿色矩形的代码，它将首先被绘制，红色将被绘制在它之上。

Answer 2

我认为你应该在红色之后涂上绿色的。所以如果你的矩形在一个数组中，你可以按相反的顺序迭代它

(function start() {
  const canvas = document.getElementById('canvas');
  canvas.width = window.innerWidth || $(window).width();
  canvas.height = window.innerHeight || $(window).height();
  const ctx = canvas.getContext('2d');

  const draw = function(opts={color: 'yellow', x: 0, y: 0}) {
    ctx.beginPath();
    ctx.rect(opts.x, opts.y, 150, 100);
    ctx.fillStyle = opts.color;
    ctx.fill();
  }

  // COLUMN 1
  draw({color: 'red',x: 20,y: 20});
  draw({color: 'green',x: 40,y: 40});
  
  // COLUMN 2
  draw({color: 'green', x: 200, y: 20});
  draw({color: 'red', x: 220, y: 40});
})();

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #000;
}

canvas {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<canvas id='canvas'></canvas>

始终在另一个形状的顶部显示画布形状

2 个答案: