javascript - 使用 Web Worker 进行异步 Canvas 绘制

Question

因此，我正在制作一个相对简单的 HTML5 Canvas 绘图网络应用程序。基本上，您可以选择颜色，然后在 500x500 的 Canvas 上绘图。它将以“涂鸦”墙为主题，因此我试图为绘图创建涂鸦效果，就像以前 MS Paint 中的喷涂工具一样。
随便看看here .

为了促进这种效果，我正在使用网络 worker 来回调鼠标事件并异步绘制到 Canvas 。我现在的天真实现是在任何鼠标事件上，围绕事件坐标随机绘制 5 个像素。

不过，我想做的是让这些像素从 mousedown 事件持续绘制到 mouseup 事件，同时更新 mousemove 事件的坐标。根据我对 JavaScript 的有限了解，我想这可能涉及 setTimeout()，但我不确定如何操纵它来实现我想要的。

免责声明:这是学校项目的一部分，因此我尽量避免使用 JQuery、Ajax 和其他此类框架；我的目标是制作一个尽可能纯粹的 JavaScript/HTML5 网络应用程序。

提前致谢。

Answer 1

使用定时器(不需要 worker ):

var mouseX = 0,
    mouseY = 0,
    mouseDown = false;

    function ev_canvas( ev ) {
        if (ev.offsetX || ev.offsetX == 0) { //opera
            mouseX = ev.offsetX;
            mouxeY = ev.offsetY;
        } else if (ev.layerX || ev.layerX == 0) { //firefox
            var canvasOffset = document.getElementById("graffiti_wall").getBoundingClientRect();
            mouseX = ev.layerX - canvasOffset.left;
            mouseY = ev.layerY - canvasOffset.top;
        }

        if ( ev.type == 'mousedown' ) {
            mouseDown = true;
        }
        else if ( ev.type == 'mouseup' ) {
            mouseDown = false;
        }
    }

    function draw_spray() {
        if( !mouseDown ) {
            //Don't do anything since the mouse is not pressed down
            return;
        }
        //Draw something at the last known location
        context.strokeRect( mouseX, mouseY, 1, 1 );
    }

    //Call draw_spray function continuously every 16 milliseconds
    window.setInterval( draw_spray, 16 );