使用javascript在html畫布中添加影像不起作用-有解無憂

我正在嘗試創建一個影像畫布，用戶可以在其中放大影像，我從此處獲得的代碼在此處輸入鏈接描述，現在我嘗試在其中添加影像并執行以下代碼：

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>

但是影像沒有顯示在畫布內，任何人都可以告訴我這里可能有什么問題，提前致謝

uj5u.com熱心網友回復：

您的draw函式從未真正繪制到畫布上。您在前 2 行中獲得畫布和背景關系，但您需要呼叫drawImage影像以將其實際添加到畫布本身。

我懷疑你想像這樣在make_base里面打電話：

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

您還需要將背景關系置于與使用它相同的范圍內。目前，該變數context只存在于draw函式內部，而不存在于函式內部make_base，因此您無法從內部訪問它make_base。

您可以將其作為變數傳遞，如下所示：

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 畫布上的任何內容時，您都需要呼叫繪制函式來更改那里的內容。

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/355102.html

標籤：javascript html 查询阿贾克斯帆布

上一篇：如何讓我的文本更接近我的標題？

下一篇：使用html按鈕更改javascript變數