绘图时画布签名/点问题

问题描述

我正在学习如何使用JS进行编码。我在一个假网站上预订法国图卢兹的自行车。我在预定之前做了一块帆布供人们签名。

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

你能帮我吗？

谢谢

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',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,2 * Math.PI);
        this.context.fill();
        this.context.closePath();
    },clearDraw: function () {
        this.context.clearRect(0,this.canvas.width,this.canvas.height);
    }
};

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

draw javascript signature