如何在页面加载时用this将canvas传入Move函数并获取其ID

你遇到的核心问题是：canvas元素本身并没有onload事件（这个事件仅适用于<img>元素或Image对象加载外部图像资源的场景）。所以你通过<canvas onload="Move(this)">的写法根本不会触发Move函数，自然控制台会输出null。

下面提供几种无需依赖getElementById/类选择器，且适配多实例场景的实现方式：

方式一：内联脚本直接传递对应Canvas元素 #

在每个Canvas元素后紧跟一段内联脚本，直接获取当前Canvas元素并传入Move函数。这种方式能确保每个实例的Canvas被精准传递，完全避免选择器冲突：

<!-- 用户控件中的Canvas实例1 -->
<canvas id="canvas-control-1"></canvas>
<script>
  // 获取当前脚本的前一个兄弟元素（即对应的Canvas）
  const targetCanvas = document.currentScript.previousElementSibling;
  Move(targetCanvas);
</script>

<!-- 用户控件中的Canvas实例2 -->
<canvas id="canvas-control-2"></canvas>
<script>
  const targetCanvas = document.currentScript.previousElementSibling;
  Move(targetCanvas);
</script>

对应的Move函数可以直接获取Canvas的ID：

function Move(canvas) {
  console.log(canvas.id); // 正确输出当前Canvas的ID
  // 你的其他逻辑代码...
}

方式二：利用DOM加载完成事件+自定义属性 #

如果不想给每个Canvas单独加脚本，可以给所有需要初始化的Canvas添加自定义属性，然后在全局DOM加载完成后统一处理：

<!-- 用户控件中的Canvas实例 -->
<canvas id="canvas-control-1" data-auto-init></canvas>
<canvas id="canvas-control-2" data-auto-init></canvas>

全局脚本：

document.addEventListener('DOMContentLoaded', () => {
  // 筛选所有带自定义属性的Canvas并逐个传入Move
  document.querySelectorAll('canvas[data-auto-init]').forEach(canvas => {
    Move(canvas);
  });
});

方式三：服务器渲染时直接绑定（适用于动态生成的控件） #

如果你的用户控件是服务器端动态生成的，可以直接在渲染时将Canvas的唯一ID传入自执行函数，精准定位元素：

<!-- 示例（以ASP.NET Razor语法为例） -->
<canvas id="@Model.CanvasId"></canvas>
<script>(function(c) { Move(c); })(document.getElementById('@Model.CanvasId'));</script>

这种方式虽然用到了getElementById，但因为每个实例的ID是服务器生成的唯一值，完全不会出现多实例冲突问题。

内容的提问来源于stack exchange，提问作者Shraddha