javascript - HTML5 Canvas 设置 z-index

Question

是否可以在 HTML5 canvas 中设置绘制对象的 z-index？

我试图得到它，这样一个对象可以在“玩家”前面，另一个对象在“玩家”后面

Answer 1

是的..有点是。您可以使用 globalCompositeOperation “绘制”现有像素。

ctx.globalCompositeOperation='destination-over';

这是一个示例和演示:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

var cx=100;

drawCircle()
cx+=20;

ctx.globalCompositeOperation='destination-over';

$("#test").click(function(){
  drawCircle();
  cx+=20;
});

function drawCircle(){
  ctx.beginPath();
  ctx.arc(cx,150,20,0,Math.PI*2);
  ctx.closePath();
  ctx.fillStyle=randomColor();
  ctx.fill();
}

function randomColor(){ 
  return('#'+Math.floor(Math.random()*16777215).toString(16));
}

body{ background-color: ivory; }
canvas{border:1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id="test">Draw new circle behind.</button><br>
<canvas id="canvas" width=300 height=300></canvas>