无法在画布 html5 上绘图

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: 为 1 或以上的 DIV；

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

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);

.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;
}

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

Answer 2

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

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

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'));

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

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

（因为我们现在是相对于一个元素而不是整个页面进行定位，所以我也更改了您的 setMousePosition 逻辑。我还将 box-sizing: border-box; 添加到 .rectangles 的样式中，这样它们就不会将点击的坐标偏移 10px，pointer-events: none;，因此鼠标事件被发送到<canvas>，而不是被覆盖的.rectangles 捕获。并且<canvas> 的height 和width 属性定义为以像素为单位；您无需将“px”放入其中。）