为什么我的画布签名不起作用？我必须在面向对象的 javascript 中做到这一点。非面向对象中的相同代码正在工作答案

【问题标题】：Why my canvas signature is not working? I had to do it in oriented object javascript. The same code in none oriented object is working为什么我的画布签名不起作用？我必须在面向对象的 javascript 中做到这一点。非面向对象中的相同代码正在工作
【发布时间】：2019-09-13 10:22:38
【问题描述】：

当我以面向对象的方式尝试此代码时，它不起作用。我所有的 console.log 都给出了答案。我不明白为什么屏幕上什么都没有。相同的代码以非面向对象的方式工作。

class Canvas {
    constructor(idCanvas, width, height){
        this.canvas=document.getElementById(idCanvas);
        this.ctx=this.canvas.getContext("2d");
        this.drawing= false;
        this.canvas.width=width;
        this.canvas.height=height;
        this.mouseEvents();
    }
    startPosition(){
        this.drawing= true;
        console.log("hi!");
    }
    finishedPosition(){
        this.drawing= false;
        console.log("hello!");
    }
    draw(e){
        if(!this.drawing) return; // si on ne dessine pas rien ne se passe
        this.ctx.lineWidth=10;
        this.ctx.lineCap="round";
        this.ctx.strokeStyle="green";
        this.ctx.lineTo(e.clientX, e.clientY);// clientX et clientY vont donner la position de la souris
        this.ctx.stroke();
        console.log("draw!");
        console.log(this.drawing);
        console.log(this.ctx);
        console.log(this.ctx.stroke);
    }
    mouseEvents(){
    this.canvas.addEventListener("mousedown",()=>this.startPosition());
    this.canvas.addEventListener("mouseup",()=>this.finishedPosition());
    this.canvas.addEventListener("mousemove",(e)=>this.draw(e));
    console.log("ok!");
    }
}
const newCanvas = new Canvas("canvas",150, 150)
console.log(newCanvas);

【问题讨论】：

标签： javascript oop object html5-canvas

【解决方案1】：

欢迎来到 SO 人，你 sn-p 没有 canvas html 元素。除此之外，它还在工作。见下文。

class Canvas {
    constructor(idCanvas, width, height){
        this.canvas=document.getElementById(idCanvas);
        this.ctx=this.canvas.getContext("2d");
        this.drawing= false;
        this.canvas.width=width;
        this.canvas.height=height;
        this.mouseEvents();
    }
    startPosition(){
        this.drawing= true;
        console.log("hi!");
    }
    finishedPosition(){
        this.drawing= false;
        console.log("hello!");
    }
    draw(e){
        if(!this.drawing) return; // si on ne dessine pas rien ne se passe
        this.ctx.lineWidth=10;
        this.ctx.lineCap="round";
        this.ctx.strokeStyle="green";
        this.ctx.lineTo(e.clientX, e.clientY);// clientX et clientY vont donner la position de la souris
        this.ctx.stroke();
        console.log("draw!");
        console.log(this.drawing);
        console.log(this.ctx);
        console.log(this.ctx.stroke);
    }
    mouseEvents(){
    this.canvas.addEventListener("mousedown",()=>this.startPosition());
    this.canvas.addEventListener("mouseup",()=>this.finishedPosition());
    this.canvas.addEventListener("mousemove",(e)=>this.draw(e));
    console.log("ok!");
    }
}
const newCanvas = new Canvas("canvas",150, 150)
console.log(newCanvas);

&lt;canvas id="canvas"&gt;&lt;/canvas&gt;

【讨论】：

【解决方案2】：

好的，谢谢！实际上它确实有效。这是因为我的 html 页面中还有其他元素，所以我的画布不在窗口的左上角。我已经弄清楚如何使用 offsetLeft 和 offsetTop 方法使其工作。

【讨论】：