为什么画布没有出现在引导表上？答案

【问题标题】：Why doesn't the Canvas appear on the bootstrap table?为什么画布没有出现在引导表上？
【发布时间】：2026-01-08 23:00:02
【问题描述】：

我有一个 Bootstrap 表，作为表数据，我需要放置一个可写的 Canvas。但是当我放置画布时，它出现了，但写作内容没有正确显示或根本没有出现。当我将画布从桌子上移开并将其放在容器或主体上时，它可以工作。代码可以在下面找到。这是什么原因，我该如何解决？提前致谢。

$(document).ready(function() {
    function createCanvas(parent, width, height) {
    var canvas = document.getElementById("inputCanvas");
    canvas.context = canvas.getContext('2d');
    return canvas;
  }

  function init(container, width, height, fillColor) {
    var canvas = createCanvas(container, width, height);
    var ctx = canvas.context;
    ctx.fillCircle = function(x, y, radius, fillColor) {
      this.fillStyle = fillColor;
      this.beginPath();
      this.moveTo(x, y);
      this.arc(x, y, radius, 0, Math.PI * 2, false);
      this.fill();
    };
    ctx.clearTo = function(fillColor) {
      ctx.fillStyle = fillColor;
      ctx.fillRect(0, 0, width, height);
    };
    ctx.clearTo("#fff");

    canvas.onmousemove = function(e) {
      if (!canvas.isDrawing) {
        return;
      }
      var x = e.pageX - this.offsetLeft;
      var y = e.pageY - this.offsetTop;
      var radius = 10;
      var fillColor = 'rgb(102,153,255)';
      ctx.fillCircle(x, y, radius, fillColor);
    };
    canvas.onmousedown = function(e) {
      canvas.isDrawing = true;
    };
    canvas.onmouseup = function(e) {
      canvas.isDrawing = false;
    };
  }

  var container = document.getElementById('inputCanvas');
  init(container, 200, 200, '#dddd');

});

#inputCanvas{
    border: 5px solid rgb(102,153,255);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<body>
<div class="container">
     <table class="table table-bordered">
        <thead>
        <tr>
            <th scope="col" style="text-align:center">Pick an image File</th>
            <th scope="col" style="text-align:center">Draw a Number</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>
                <form method="post" action="/upload" enctype="multipart/form-data">
                    <div class="d-flex justify-content-center">
                        <div class="form-group">
                            <input type="file" class="form-control-file" name="img" accept="image/*" id="img"
                                   aria-describedby="fileHelpId">
                        </div>
                    </div>
                    <div class="col text-center">
                        <input type="submit" value="Submit" class="btn btn-primary">
                    </div>
                </form>
            </td>
            <td>
               <canvas id="inputCanvas" width="400" height="400"></canvas>
            </td>
        </tr>
        <tr>
            <th colspan="2" style="text-align:center">
                Predicted Number
            </th>
        </tr>
        </tbody>
    </table>
</div>

【问题讨论】：

标签： javascript html css bootstrap-4

【解决方案1】：

变化：

var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;

收件人：

var xy = this.getBoundingClientRect();
      
  var x = e.pageX - xy.left - window.scrollX;
  var y = e.pageY - xy.top - window.scrollY;

this.offsetLeft 在表格内时不起作用的原因是因为您获得了相对于其父级而不是相对于浏览器窗口的 offsetLeft。

【讨论】：

感谢您的回复。这更准确一些。但是当我从画布底部开始绘制时，它是不准确的。但是当我使用画布的顶部进行绘制时，它的效果比以前好得多。有什么办法可以改善吗？
我怀疑是因为浏览器窗口是滚动的，所以我在上面的代码中添加了 window.scrollX 和 window.scrollY。
没问题。您还应该减去圆的半径，使圆以鼠标为中心。