使用 javascript 在 html canvas 中添加图像无效

Question

我正在尝试创建一个图像 canvas，用户可以在其中放大图像，我从这里获得的代码 enter link description here，现在我尝试在其中添加图像并且我做了以下代码：

function draw(scale, translatePos) {
  var canvas = document.getElementById("myCanvas");
  var context = canvas.getContext("2d");
  make_base(context);
}

function make_base(context) {
  var base_image = new Image();
  base_image.src = 'https://www.gstatic.com/webp/gallery3/1.sm.png';
  base_image.onload = function() {
    context.drawImage(base_image, 0, 0);
  }
}

window.onload = function() {
  var canvas = document.getElementById("myCanvas");

  var translatePos = {
    x: canvas.width / 2,
    y: canvas.height / 2
  };

  var scale = 1.0;
  var scaleMultiplier = 0.8;
  var startDragOffset = {};
  var mouseDown = false;

  // add button event listeners
  document.getElementById("plus").addEventListener("click", function() {
    scale /= scaleMultiplier;
    draw(scale, translatePos);
  }, false);

  document.getElementById("minus").addEventListener("click", function() {
    scale *= scaleMultiplier;
    draw(scale, translatePos);
  }, false);

  // add event listeners to handle screen drag
  canvas.addEventListener("mousedown", function(evt) {
    mouseDown = true;
    startDragOffset.x = evt.clientX - translatePos.x;
    startDragOffset.y = evt.clientY - translatePos.y;
  });

  canvas.addEventListener("mouseup", function(evt) {
    mouseDown = false;
  });

  canvas.addEventListener("mouseover", function(evt) {
    mouseDown = false;
  });

  canvas.addEventListener("mouseout", function(evt) {
    mouseDown = false;
  });

  canvas.addEventListener("mousemove", function(evt) {
    if (mouseDown) {
      translatePos.x = evt.clientX - startDragOffset.x;
      translatePos.y = evt.clientY - startDragOffset.y;
      draw(scale, translatePos);
    }
  });

  draw(scale, translatePos);
};



jQuery(document).ready(function() {
  $("#wrapper").mouseover(function(e) {
    $('#status').html(e.pageX + ', ' + e.pageY);
  });
})

body {
  margin: 0px;
  padding: 0px;
}

#wrapper {
  position: relative;
  border: 1px solid #9C9898;
  width: 578px;
  height: 200px;
}

#buttonWrapper {
  position: absolute;
  width: 30px;
  top: 2px;
  right: 2px;
}

input[type="button"] {
  padding: 5px;
  width: 30px;
  margin: 0px 0px 2px 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<body onmousedown="return false;">
  <div id="wrapper">
    <canvas id="myCanvas" width="578" height="200">
  </canvas>
    <div id="buttonWrapper">
      <input type="button" id="plus" value="+"><input type="button" id="minus" value="-">
    </div>
  </div>
  <h2 id="status">
    0, 0
  </h2>
</body>

但是图像没有显示在 canvas 中

Answer 1

您的 draw 函数实际上从未绘制到 canvas。您在前两行中获得了 canvas 和上下文，但是您需要使用图像调用 drawImage 以将其实际添加到 canvas 本身。

我怀疑你想像这样在其中调用 make_base:

function draw(scale, translatePos) {
  var canvas = document.getElementById("myCanvas");
  var context = canvas.getContext("2d");
  make_base();
}

您还需要在使用上下文时在同一范围内使用它。目前，变量 context 仅存在于 draw 函数中而不存在于 make_base 函数中，因此您无法从 make_base.[=19= 内部访问它]

您可以像这样将其作为变量传递：

function draw(scale, translatePos) {
  var canvas = document.getElementById("myCanvas");
  var context = canvas.getContext("2d");
  make_base(context);
}

function make_base(context) {
  var base_image = new Image();
  base_image.src = 'a2.jpg';
  base_image.onload = function() {
    context.drawImage(base_image, 0, 0);
  }
}

每次您想更改 HTML canvas 上的任何内容时，您都需要调用绘制函数来更改那里的内容。

使用 javascript 在 html canvas 中添加图像无效

adding image inside html canvas using javascript not working

html

javascript

ajax

jquery

canvas