Question

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

为了促进这种效果，我正在利用Web worker回调鼠标事件并异步绘制到画布。我现在的天真实现是，在任何鼠标事件中，在事件的坐标周围随机绘制5个像素。

我想做的是将这些像素从mousedown事件连续绘制到mouseup事件，同时更新mousemove事件上的coords。从我对JavaScript的有限知识，我想这可能涉及一个setTimeout（），但我不知道如何操纵它来实现我想要的。

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

提前致谢。

Answer 1

使用计时器（无需工人）：

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 );

Answer 2

如果您想使用WebWorker（例如更复杂的绘图算法），我可以考虑以下设置：

onmousedown，生成一个新工作器并在其上注册一个绘制画布上对象的处理程序
onmouseup（和-leave等），终止工作者
onmousemove，如果存在工人确定鼠标坐标并将其发送到工作人员

在工人中

听新的鼠标坐标
启动一个超时间隔，它会不断触发绘制事件（取决于当前坐标和一个聪明的算法）

然而，我认为对于简单的涂鸦工具来说，工人的开销太大了。使用简单的解决方案，不需要像@Esailija那样的工人。

如果你有一个更复杂的应用程序可以很好地利用Worker，你就不会真正在它们上生成它们并终止它们。相反，您可以为单种工具实例化单个Worker，并向它们触发启动处理和结束处理事件。

使用Web Workers绘制异步画布

2 个答案: