Question

大家）我需要在画布背景图像上画一个圆圈。但是，遗憾的是，背景图像完全覆盖了圆圈，因此用户无法看到它。有我的代码：

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

canvas.width  = window.innerWidth;
canvas.height = window.innerHeight;
var background = new Image();
background.src = "img/star-sky.jpg";

// Make sure the image is loaded first otherwise nothing will draw.
background.onload = function(){
    context.drawImage(background,0,0);   
}

var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 90;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 5;
context.strokeStyle = 'yellow';
context.stroke();

background.onload = function(){
    context.drawImage(background,0,0);   
}

拜托，您能告诉我如何使用z-index canvas属性吗？

Answer 1

即使不使用z-index，此代码也可按您所说的方式工作。

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var background = new Image();
background.src = "http://www.c00lsch00l.eu/Games/AA/stars.png";

// Make sure the image is loaded first otherwise nothing will draw.
background.onload = function() {
  context.drawImage(background, 0, 0);
  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;
  var radius = 90;

  context.beginPath();
  context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
  context.lineWidth = 5;
  context.strokeStyle = 'yellow';
  context.stroke();
}



/*background.onload = function(){
    context.drawImage(background,0,0);   
}*/

<canvas id='myCanvas'></canvas>

我做了什么：我将你的代码粘贴到background.onload方法中，加载后台并省略另一个onload调用（无论如何都会覆盖你的黄色圆圈）。

您还可以将两个画布相互叠加（使用绝对位置），然后使用z-index根据需要显示它们。在你的情况下，这是没有必要的。简单的绘图顺序起到了作用。

Z-index画布属性

1 个答案: