Как получить плавные события мыши для приложения холста "стиль рисования"?

Question

Я пытаюсь плавно перемещать мышь по экрану для приложения в стиле рисования.Точнее, это «Пороховая игрушка».Это означает, что он рисует пиксель за пикселем, поэтому я не могу сделать некоторые хитрые строки.Сначала я думал о том, чтобы проверить мышь и мышь, а затем добавить что-то в цикл обновления игры, чтобы рисовать пиксели на экране, но это не сработало, когда я обнаружил, что не могу напрямую получить мышь X и мышь Y безСобытия стрельбы.

Так кто-нибудь знает способ плавных движений мыши, как я сейчас использую событие mousemove, которое вызывает это:

http://img1.uploadscreenshot.com/images/orig/9/26119184415-orig.jpg

(Обратите внимание, какпиксели разбросаны)

Спасибо,

Answer 1

Похоже, вы делаете мир песчаных клонов, так что я думаю, вам нужны ректы.Я использовал Алгоритм линии Брезенхема для построения точек.В основном onmousedown начинает рисовать.Затем onmousemove сравнивает текущие координаты с последними координатами и отображает все точки между ними.

Live Demo

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    painting = false,
    lastX = 0,
    lastY = 0;

canvas.width = canvas.height = 600;
ctx.fillRect(0, 0, 600, 600);

canvas.onmousedown = function(e) {
    if (!painting) {
        painting = true;
    } else {
        painting = false;
    }

    ctx.fillStyle = "#ffffff";
    lastX = e.pageX - this.offsetLeft;
    lastY = e.pageY - this.offsetTop;
};

canvas.onmousemove = function(e) {
    if (painting) {
        mouseX = e.pageX - this.offsetLeft;
        mouseY = e.pageY - this.offsetTop;

        // find all points between        
        var x1 = mouseX,
            x2 = lastX,
            y1 = mouseY,
            y2 = lastY;


        var steep = (Math.abs(y2 - y1) > Math.abs(x2 - x1));
        if (steep){
            var x = x1;
            x1 = y1;
            y1 = x;

            var y = y2;
            y2 = x2;
            x2 = y;
        }
        if (x1 > x2) {
            var x = x1;
            x1 = x2;
            x2 = x;

            var y = y1;
            y1 = y2;
            y2 = y;
        }

        var dx = x2 - x1,
            dy = Math.abs(y2 - y1),
            error = 0,
            de = dy / dx,
            yStep = -1,
            y = y1;

        if (y1 < y2) {
            yStep = 1;
        }

        for (var x = x1; x < x2; x++) {
            if (steep) {
                ctx.fillRect(y, x, 1, 1);
            } else {
                ctx.fillRect(x, y, 1, 1);
            }

            error += de;
            if (error >= 0.5) {
                y += yStep;
                error -= 1.0;
            }
        }



        lastX = mouseX;
        lastY = mouseY;

    }
}