javascript - 绘图时画布签名/点的问题

Question

我正在学习如何使用 JS 进行编码。我正在做一个假网站，用于在图卢兹（法国）预订自行车。我做了一个画布让人们在预订前签名。

问题：当我快速绘制时（取决于浏览器），我有点而不是线。

你能帮我吗 ？

https://github.com/ldoba/project-03

谢谢

var Canvas = {
    init: function () {

        var that = this;

        this.canvas = document.getElementById('canvas');
        this.context = this.canvas.getContext('2d');
        this.paint = false;
        window.addEventListener('mousedown', function () {
            that.paint = true;
        });
        window.addEventListener('mouseup', function () {
            that.paint = false;
        });
        // suivi des coordonnées au clic
        this.canvas.addEventListener('mousedown', function (e) {
            that.draw(e.pageX, e.pageY);
        });
        this.canvas.addEventListener('mouseup', function (e) {
            that.draw(e.pageX, e.pageY);
        });
        //si clic gauche (mousedown) -> on dessine (draw) en fonction des coordonnées récupérées
        this.canvas.addEventListener('mousemove', function (e) {
            if (that.paint === true) {
                that.draw(e.pageX, e.pageY);
            }
        });
        //au clic sur le bouton on vide le canvas
        document.getElementById('reset').addEventListener('click', function () {
            that.clearDraw();
        });
    },

    draw: function (mouseX, mouseY) {
        var cvsOffset = $(this.canvas).offset();

        this.context.beginPath();
        this.context.fillStyle = "blue";
        this.context.arc(mouseX - cvsOffset.left, mouseY - cvsOffset.top, 1.5, 0, 2 * Math.PI);
        this.context.fill();
        this.context.closePath();
    },

    clearDraw: function () {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
};

window.addEventListener('load', function () {
    Canvas.init();
});

标签： javascriptcanvasdrawsignature