Vue中HTML Canvas实例访问失败的问题求助

首先看你遇到的TypeError: Cannot set property 'linewidth' of null错误，核心原因是你在mounted钩子中把Canvas上下文赋值给了错误的实例属性，再加上几个拼写和逻辑小问题，导致了报错和功能异常。下面一步步帮你修正：

问题分析与修正点 #

1. Canvas上下文属性赋值错误
   你在data中声明了ctx: null，但在mounted里却把获取到的上下文赋值给了this.vueCanvas，而你的draw方法里用的是this.ctx——这就导致this.ctx始终是null，自然会报错。

2. 属性名拼写错误

   • Canvas API里的线宽属性是lineWidth（注意W大写），不是linewidth
   • 绘制线段的方法是lineTo()，不是linTo()（少了一个字母e）

3. 绘图逻辑的小问题

   • 每次绘制前需要调用beginPath()开启新路径，否则线条会一直连在一起
   • 使用clientX/clientY是相对于浏览器视口的坐标，应该转换为Canvas内部的相对坐标，避免Canvas有偏移时绘制位置不准

修正后的完整代码 #

模板部分（优化事件绑定写法）

<div id="app">
  <canvas 
    @mousedown="startPainting" 
    @mouseup="finishedPainting" 
    @mousemove="draw" 
    id="canvas"
  ></canvas>
</div>

JS部分

<script>
export default {
  name: "HelloWorld",
  data: () => ({
    canvas: null,
    ctx: null,
    message: "Henlo vue!",
    painting: false
  }),
  mounted() {
    // 获取canvas元素并赋值给实例属性
    this.canvas = document.getElementById("canvas");
    // 把上下文赋值给data中声明的ctx
    this.ctx = this.canvas.getContext("2d");
    // 给canvas设置宽高，避免拉伸变形
    this.canvas.width = 600;
    this.canvas.height = 400;
    this.canvas.style.border = "1px solid #ccc";
  },
  methods: {
    startPainting(e) {
      this.painting = true;
      // 开始绘制时先移动到鼠标初始位置
      this.ctx.beginPath();
      const rect = this.canvas.getBoundingClientRect();
      this.ctx.moveTo(e.clientX - rect.left, e.clientY - rect.top);
    },
    finishedPainting() {
      this.painting = false;
    },
    draw(e) {
      if (!this.painting) return;
      
      const rect = this.canvas.getBoundingClientRect();
      // 转换为canvas内部相对坐标
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;

      this.ctx.lineWidth = 10; // 修正属性名大小写
      this.ctx.lineCap = "round";
      this.ctx.lineTo(x, y); // 修正方法名拼写
      this.ctx.stroke();
    }
  }
};
</script>

额外小提示 #

• Vue中绑定事件时，v-on:mousedown="startPainting()"可以简化为@mousedown="startPainting"，不需要加括号（除非需要传递自定义参数）
• 给Canvas设置宽高时，直接修改元素的width/height属性，不要只通过CSS设置，否则会导致绘制内容被拉伸

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