html5 canvas - Programmatically triggering mouse move event in Javascript - Stack Overflow

admin管理员组

文章数量:1290394

I have external html5 canvas that you can paint on some lines using your mouse. I want to programmatically paint something one this canvas e.g. circle but in a form of animation (not painting at once but imitate the way the human would do and paint circle lets say for the duration of 1 sec.

The code on the external is not mine and uses GWT and this way is highly pressed and obfuscated. That's why I thought about triggering a sequence of mousedown, mousemove, sleep, mousemove, mouseup events. I know it's possible to trigger mouse down and up event but what about mouse move event at specific location? Ideally using jQuery.

I have external html5 canvas that you can paint on some lines using your mouse. I want to programmatically paint something one this canvas e.g. circle but in a form of animation (not painting at once but imitate the way the human would do and paint circle lets say for the duration of 1 sec.

The code on the external is not mine and uses GWT and this way is highly pressed and obfuscated. That's why I thought about triggering a sequence of mousedown, mousemove, sleep, mousemove, mouseup events. I know it's possible to trigger mouse down and up event but what about mouse move event at specific location? Ideally using jQuery.

• javascript
• html5-canvas
• dom-events

Share Improve this question Follow edited Sep 3, 2019 at 17:54 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Mar 17, 2012 at 12:15 pzopzo 2,16733 gold badges2525 silver badges4242 bronze badges 6

• 1 can you show us your failed attempt? – mindandmedia Commented Mar 17, 2012 at 12:22
• unfortunately I'm stuck on how to make mouse move event – pzo Commented Mar 17, 2012 at 12:29
• Do you really need to trigger mouse events? What are the reasons not to use lineTo and moveTo to draw programmatically? Tutorial on drawing on canvas - html5canvastutorials./tutorials/html5-canvas-paths – widged Commented Mar 17, 2012 at 14:19
• as I said the canvas belongs to external code made using GWT. Those paintings on canvas executes some other code as well. Generated GWT code is hard to modify that's why the idea to programmatically triggering events. – pzo Commented Mar 17, 2012 at 19:48
• 1 This gist could be useful: gist.github./3517765 – Philip Nuzhnyy Commented Aug 29, 2012 at 19:41

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 3

Have you looked at initMouseEvent and dispatchEvent?

Here is a link https://developer.mozilla/en/Document_Object_Model_%28DOM%29/event.initMouseEvent

The new (non-deprecated) way to do this is with the MouseEvent constructor.

Here's some sample code that you can adapt to your use case:

var gestureTimeoutID;
var periodicGesturesTimeoutID;

window.simulateRandomGesture = function (doneCallback) {
    var target = document.querySelector('canvas');

    var rect = target.getBoundingClientRect();

    var simulateMouseEvent = function simulateMouseEvent(type, point) {
        var event = new MouseEvent(type, {
            'view': window,
            'bubbles': true,
            'cancelable': true,
            'clientX': rect.left + point.x,
            'clientY': rect.top + point.y,
            // you can pass any other needed properties here
        });
        target.dispatchEvent(event);
    };

    var t = 0;

    /* Simple circle:
    var getPointAtTime = (t) => {
        return {
            x: 300 + Math.sin(t / 50) * 150,
            y: 300 + Math.cos(t / 50) * 150,
        };
    };
    */

    // More fun:
    var cx = Math.random() * rect.width;
    var cy = Math.random() * rect.height;
    var gestureComponents = [];
    var numberOfComponents = 5;
    for (var i = 0; i < numberOfComponents; i += 1) {
        gestureComponents.push({
            rx: Math.random() * Math.min(rect.width, rect.height) / 2 / numberOfComponents,
            ry: Math.random() * Math.min(rect.width, rect.height) / 2 / numberOfComponents,
            angularFactor: Math.random() * 5 - Math.random(),
            angularOffset: Math.random() * 5 - Math.random()
        });
    }
    var getPointAtTime = function getPointAtTime(t) {
        var point = { x: cx, y: cy };
        for (var i = 0; i < gestureComponents.length; i += 1) {
            var c = gestureComponents[i];
            point.x += Math.sin(Math.PI * 2 * (t / 100 * c.angularFactor + c.angularOffset)) * c.rx;
            point.y += Math.cos(Math.PI * 2 * (t / 100 * c.angularFactor + c.angularOffset)) * c.ry;
        }
        return point;
    };


    simulateMouseEvent('mousedown', getPointAtTime(t));
    var move = function move() {
        t += 1;
        if (t > 50) {
            simulateMouseEvent('mouseup', getPointAtTime(t));
            if (doneCallback) {
                doneCallback();
            }
        } else {
            simulateMouseEvent('mousemove', getPointAtTime(t));
            gestureTimeoutID = setTimeout(move, 10);
        }
    };
    move();
};

window.simulateRandomGesturesPeriodically = function (delayBetweenGestures) {
    delayBetweenGestures = delayBetweenGestures !== undefined ? delayBetweenGestures : 50;

    var waitThenGo = function waitThenGo() {
        periodicGesturesTimeoutID = setTimeout(function () {
            window.simulateRandomGesture(waitThenGo);
        }, delayBetweenGestures);
    };
    window.simulateRandomGesture(waitThenGo);
};

window.stopSimulatingGestures = function () {
    clearTimeout(gestureTimeoutID);
    clearTimeout(periodicGesturesTimeoutID);
};

本文标签： html5 canvasProgrammatically triggering mouse move event in JavascriptStack Overflow