HTML5 Canvas设置z-index [英] HTML5 Canvas set z-index

问题描述

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

Is it possible to set the z-index of a drawn object in HTML5 canvas?

我试图得到它，因此一个对象可以在玩家和另一个对象是玩家的背后

I am trying to get it so one object can be infront of a the "player" and another object is behind the "player"

推荐答案

是的......是的。您可以使用合成来绘制现有像素。

Yes..kind of yes. You can use compositing to "draw behind" existing pixels.

ctx.globalCompositeOperation='destination-over';

以下是一个示例和一个演示：

Here's an example and a Demo:

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>

这篇关于HTML5 Canvas设置z-index的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！