JavaScript Canvas签名板转含方法对象遇异常，求技术协助

我帮你梳理了代码里的关键问题，这些错误导致签名功能失效，下面给你详细解释并提供修复后的代码：

核心问题分析 #

1. 对象字面量中this和箭头函数的错误使用
   对象字面量定义时，内部的this并不指向当前对象（而是指向外层全局上下文，比如浏览器中的window）；同时箭头函数的this是词法绑定的，永远不会指向当前对象，这就导致你所有访问this.canvas、this.signer的操作都无法获取到正确的值。

2. 事件绑定逻辑混乱
   你在demarrer、dessiner这类方法内部重复添加事件监听，这不仅逻辑错误，还会导致事件被多次绑定；而且初始化方法eventCanvas里只是写了方法名，根本没有实际执行绑定操作。

3. 初始化流程错误
   你在对象字面量中直接尝试获取this.canvas.getContext("2d")，此时this.canvas还未被赋值（对象还没创建完成），所以cont属性会是undefined。

修复后的完整代码 #

JavaScript 部分 #

const CanvasSignature = {
  // 初始化方法：完成元素获取、属性设置和事件绑定
  init() {
    this.canvas = document.querySelector("#canvas");
    this.cont = this.canvas.getContext("2d");
    this.signer = false;
    
    // 设置画布尺寸
    this.canvas.width = 150;
    this.canvas.height = 80;
    
    // 绑定画布事件
    this.bindCanvasEvents();
  },
  
  // 统一绑定事件，确保this指向当前对象
  bindCanvasEvents() {
    this.canvas.addEventListener("mousedown", this.demarrer.bind(this));
    this.canvas.addEventListener("mouseup", this.arreter.bind(this));
    this.canvas.addEventListener("mousemove", this.dessiner.bind(this));
  },
  
  demarrer(e) {
    this.signer = true;
    this.dessiner(e);
  },
  
  arreter() {
    this.signer = false;
    this.cont.beginPath();
  },
  
  dessiner(e) {
    if (!this.signer) return;
    
    this.cont.lineWidth = 2;
    this.cont.strokeStyle = "#000";
    this.cont.lineTo(e.offsetX, e.offsetY);
    this.cont.stroke();
    this.cont.beginPath();
    this.cont.moveTo(e.offsetX, e.offsetY);
  }
};

// 启动签名板
CanvasSignature.init();

CSS 与 HTML 部分（保持不变即可） #

#canvas{ border: 2px solid #000; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<canvas id="canvas"></canvas>

修复要点说明 #

1. 用init方法统一初始化：确保在获取到canvas元素后，再初始化绘图上下文和其他属性，避免出现undefined的情况。
2. 使用普通函数作为对象方法：放弃箭头函数，改用普通函数定义方法，再通过bind(this)确保方法内部的this指向当前对象。
3. 单独的事件绑定方法：将事件绑定逻辑集中到bindCanvasEvents中，在初始化时一次性完成绑定，避免重复绑定和逻辑混乱。
4. 保持原有的绘图逻辑：修复后的代码保留了你原本的签名绘图逻辑，只是调整了对象结构和上下文指向问题。

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