画布不能很好地与引导程序一起使用答案

【问题标题】：Canvas doesn't work well with bootstrap画布不能很好地与引导程序一起使用
【发布时间】：2018-07-16 13:01:44
【问题描述】：

您好，我对 Canvas 标签有疑问。我正在使用引导程序，我想创建一个带有图像的画布，我可以在用鼠标单击后在其中绘制一个点，但是因为我使用的是引导程序，所以画布区域拉伸并且点不在同一个地方，我点击了鼠标

$().ready(function() {
  showImage();

  $("#image").click(function(e) {
    getMousePositionAtClick(e);
  });


  function showImage() {
    var canvas = document.getElementById('image');
    var ctx = canvas.getContext('2d');

    var img = new Image();
    img.src = 'images/Piantina.jpg';
    img.onload = function() {

      ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);
    };
  }

  function getMousePositionAtClick(e) {
    var rect = image.getBoundingClientRect();
    var x = e.clientX - rect.left;
    var y = e.clientY - rect.top;

    alert(rect.left);
    alert(rect.top);
    drawPoint(x, y);
  }

  function drawPoint(x, y) {
    var ctx = document.getElementById("image").getContext("2d");
    ctx.fillStyle = "#000";
    ctx.beginPath();
    ctx.arc(x, y, 3, 0, Math.PI * 2, true);
    ctx.fill();
  }
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-8" id="columnCanvas">
  <div class="card card-body">
    <canvas id="image"></canvas>
  </div>
</div>

【问题讨论】：

问题是 Bootstrap 被设计成响应式的，所以所有的布局都是块大小的，问题是 Canvas 元素不是一个动态大小的控件，但是如果我们决定了一个大小，我们可以做类似的事情 -> @ 987654323@ 这将强制画布为 200px/200px，然后也使画布元素 200px/200px 停止任何缩放。
@Keith 我们不需要使用 css 样式的宽度/高度。

标签： javascript html canvas draw

【解决方案1】：

正如上面 cmets 中提到的，Canvas 元素是不响应的。另一方面，Bootstrap 是响应式的。所以要停止缩放，我们可以设置大小。查看 Canvas 的规范，如果没有指定默认大小是 300px / 150px.. 所以理论上如果我们只是将 Canvas CSS 大小设置为 300px/150px，这也会阻止缩放，下面是一个示例。

$().ready(function() {
  showImage();

  $("#image").click(function(e) {
    getMousePositionAtClick(e);
  });


  function showImage() {
    var canvas = document.getElementById('image');
    var ctx = canvas.getContext('2d');

    var img = new Image();
    img.src = 'images/Piantina.jpg';
    img.onload = function() {

      ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);
    };
  }

  function getMousePositionAtClick(e) {
    var rect = image.getBoundingClientRect();
    var x = e.clientX - rect.left;
    var y = e.clientY - rect.top;

    alert(rect.left);
    alert(rect.top);
    drawPoint(x, y);
  }

  function drawPoint(x, y) {
    var ctx = document.getElementById("image").getContext("2d");
    ctx.fillStyle = "#000";
    ctx.beginPath();
    ctx.arc(x, y, 3, 0, Math.PI * 2, true);
    ctx.fill();
  }
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-8" id="columnCanvas">
  <div class="card card-body">
    <canvas id="image" style="width:300px;height:150px"></canvas>
  </div>
</div>

【讨论】：