Javascript“this”在页面加载时传递画布以发挥作用

Question

我正在尝试将 HTML canvas 元素作为参数传递给函数，并且我认为使用“this”关键字会起作用，但我遇到了问题。有人可以帮助我在页面加载时使用“this”关键字将画布元素传递给“Move()”函数吗？

<div id="Container">
   <canvas id="Chart" class="Chart" width="400" height="400" onload="Move(this)"></canvas>
</div>

   function Move(element) {
   console.log(element);
   }

我想访问画布的 id，但我得到的是 null。我不想使用“getElementById”、“getElementsByClassName”或“getElementsByTagName”等其他方法，因为画布位于用户控件内部，并且在处理用户控件的多个实例时可能会出现问题。

当使用 onload 属性加载页面时，如何将 HTML canvas 元素作为参数传递给 Move() 函数，以及如何在不使用其他方法的情况下访问画布的 id？

Answer 1

Canvas 没有

onload

功能，但你可以在窗口加载时调用它

function move() {
  const canvas = document.getElementById("Chart");
  if (canvas.getContext) {
    const ctx = canvas.getContext("2d");
  }
}
window.addEventListener("load", move);

来源：https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage