Vue3中Uncaught (in promise) TypeError错误求助：canvas.value.getContext不是函数

你的代码存在两处关键问题，同时针对报错本身给出排查和修复方案：

修复后的完整代码 #

<script setup>
import { onMounted, ref } from 'vue'

const canvas = ref(null);
const ctx = ref(null);

const drawLine = () => {
  ctx.value.moveTo(100, 100);
  ctx.value.lineTo(100, 400);
  ctx.value.stroke();
}

const initContext = () => {
  // 先校验canvas元素是否有效
  if (!(canvas.value instanceof HTMLCanvasElement)) {
    console.error('无法获取有效的Canvas元素');
    return;
  }
  ctx.value = canvas.value.getContext('2d');
}

onMounted(() => {
  initContext();
  // 确保上下文初始化完成后再执行绘制
  if (ctx.value) {
    drawLine();
  }
})
</script>

<template>
  <canvas ref="canvas" height="600" width="600"></canvas>
</template>

<style scoped>
canvas {
  border: 1px solid;
}
</style>

错误原因与修复说明 #

1. Ref变量赋值错误
   你最初将ctx定义为ref对象，但在initContext中直接用ctx = canvas.value.getContext('2d')重新赋值变量，导致ctx丢失了ref身份，后续绘制逻辑会出现隐式错误。正确的做法是修改ref的.value属性：ctx.value = canvas.value.getContext('2d')，同时将let ctx = ref(null)改为const ctx = ref(null)（因为ref对象本身不需要被重新赋值）。

2. Canvas元素校验缺失
   报错canvas.value.getContext is not a function说明canvas.value并非有效的HTMLCanvasElement对象，可能的原因包括：

   • 模板中ref名称拼写错误，或与全局变量重名导致绑定异常
   • 组件存在条件渲染（如v-if），导致onMounted执行时Canvas元素尚未挂载

   修复方案中添加了canvas.value instanceof HTMLCanvasElement的校验，确保只有拿到正确的Canvas元素后才初始化上下文；同时在onMounted中检查ctx.value是否存在，避免绘制逻辑执行时上下文未就绪。

额外排查建议 #

如果修复后仍报错，在initContext函数开头添加console.log(canvas.value)，查看输出对象：

• 若输出null：检查模板中Canvas元素是否被条件渲染包裹，可改用watch监听canvas.value的变化，直到元素存在后再初始化上下文。
• 若输出非Canvas元素：检查是否有重名的canvas变量覆盖了ref对象，或模板中ref绑定的元素是否被意外替换。

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