Question

我正在尝试在HTML5的画布上绘制一个矩形。如果我使用画布（fileList作为id），它不会显示在屏幕上，但如果我使用了div，它就会显示出来。我想在图像上显示一个矩形以进行注释。

function initDraw(canvas) {
  function setMousePosition(e) {
    var ev = e || window.event; 
    if (ev.pageX) { 
      mouse.x = ev.pageX + window.pageXOffset;
      mouse.y = ev.pageY + window.pageYOffset;
    } else if (ev.clientX) {
      mouse.x = ev.clientX + document.body.scrollLeft;
      mouse.y = ev.clientY + document.body.scrollTop;
    }
  };

  var mouse = {
    x: 0,
    y: 0,
    startX: 0,
    startY: 0
  };
  var element = null;

  canvas.onmousemove = function (e) {
    setMousePosition(e);
    if (element !== null) {
      element.style.width = Math.abs(mouse.x - mouse.startX) + 'px';
      element.style.height = Math.abs(mouse.y - mouse.startY) + 'px';
      element.style.left = (mouse.x - mouse.startX < 0) ? mouse.x + 'px' : mouse.startX + 'px';
      element.style.top = (mouse.y - mouse.startY < 0) ? mouse.y + 'px' : mouse.startY + 'px';
    }
  }

  canvas.onclick = function (e) {
    if (element !== null) {
      element = null;
      canvas.style.cursor = "crosshair";
      console.log("finsihed.");                        
    } else {
      console.log("begun.");
      mouse.startX = mouse.x;
      mouse.startY = mouse.y;
      element = document.createElement('div');
      element.className = 'rectangle';
      element.style.left = mouse.x + 'px';
      element.style.top = mouse.y + 'px';
      canvas.appendChild(element)
      canvas.style.cursor = "crosshair";
    }
  }
}

initDraw(document.getElementById('fileList'));

.rectangle {
    border: 10px solid black;
    position: absolute;
    background-color: black; 
}

<canvas id="fileList" height="680px" width="800px"></canvas>

Answer 1

<强>摘要你似乎在问如何在画布上重叠DIV。

<强>答案使用CSS，使用Z-Index控制图层重叠的方式你需要设置一个为Z-Index：0和带有Z-Index的DIV：1或以上;

不要忘记：没有高度或宽度的DIV元素将不在Internet Explorer或Safari中显示show，因此请确保您的CSS包含高度和宽度

＆＃13;

function funStart(){
  if (typeof(document.getElementById("fileList").getContext("2d")) == undefined){
    console.log ("No HTML5 Canvas support");
    return;
  }else{
    var ctx = document.getElementById("fileList").getContext("2d");
  }

  ctx.canvas.height = 500;
  ctx.canvas.width = 500;
  ctx.fillStyle = "#F00";
  ctx.fillRect (0,0, ctx.canvas.width, ctx.canvas.height);
  ctx.fill();

}

document.addEventListener("DOMContentLoaded", funStart(), false);

＆＃13;

.rectangle {
    border: 10px solid silver;
    color: white;
    height: 300px;
    width: 200px;
    position: absolute;
    top: 10;
    left: 10;
    background-color: black; 
    z-index: 23;
}
canvas{
  position: absolute;
  z-index: 0;
}

＆＃13;

<canvas id="fileList" height="680px" width="800px"></canvas>
<div id="messageBoard" class="rectangle">My DIV Message goes here</div>

＆＃13;

Answer 2

您将.rectangle <div>放在<canvas>内，但<canvas>的子项用作后备内容。只有在浏览器不支持<canvas>时才会显示它们。

相反，将<canvas>包装在已定位的元素中以创建可管理的containing block，并将.rectangle添加到该元素：

＆＃13;

function initDraw(canvas) {
  function setMousePosition(e) {
    var ev = e || window.event;
    mouse.x = ev.offsetX;
    mouse.y = ev.offsetY;
  };

  var mouse = {
    x: 0,
    y: 0,
    startX: 0,
    startY: 0
  };
  var element = null;

  canvas.onmousemove = function (e) {
    setMousePosition(e);
    if (element !== null) {
      element.style.width = Math.abs(mouse.x - mouse.startX) + 'px';
      element.style.height = Math.abs(mouse.y - mouse.startY) + 'px';
      element.style.left = (mouse.x - mouse.startX < 0) ? mouse.x + 'px' : mouse.startX + 'px';
      element.style.top = (mouse.y - mouse.startY < 0) ? mouse.y + 'px' : mouse.startY + 'px';
    }
  }

  canvas.onclick = function (e) {
    if (element !== null) {
      element = null;
      canvas.style.cursor = "crosshair";
      console.log("finsihed.");                        
    } else {
      console.log("begun.");
      mouse.startX = mouse.x;
      mouse.startY = mouse.y;
      element = document.createElement('div');
      element.className = 'rectangle';
      element.style.left = mouse.x + 'px';
      element.style.top = mouse.y + 'px';
      canvas.closest('.canvaswrap').appendChild(element);
      canvas.style.cursor = "crosshair";
    }
  }
}

initDraw(document.getElementById('fileList'));

＆＃13;

.rectangle {
    border: 10px solid black;
    position: absolute;
    background-color: black; 
    box-sizing: border-box;
    pointer-events: none;
}
.canvaswrap {
    position: relative;
    padding: 0;
}

＆＃13;

<div class="canvaswrap">
  <canvas id="fileList" height="680" width="800"></canvas>
</div>

＆＃13;

（由于我们现在相对于一个元素而不是整个页面进行定位，因此我也更改了setMousePosition逻辑。我还将box-sizing: border-box;添加到.rectangle s＆＃39;样式设置使得它们不会被点击的坐标偏离10px和pointer-events: none;，因此鼠标事件会被发送到<canvas>，而不会被重叠的.rectangle捕获。 <canvas>的{{1}}和height属性定义为像素;您不需要将＆＃34; px＆＃34;放在其中。）

无法绘制画布html5

2 个答案: