2

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

为了促进这种效果，我使用 web worker 来回调鼠标事件并异步绘制到画布上。我现在的幼稚实现是，在任何鼠标事件上，都会在事件坐标周围随机绘制 5 个像素。

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

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

提前致谢。

4

2 回答 2

3

使用计时器（不需要工人）：

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 );
于 2012-10-25T18:07:40.210 回答
2

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

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

在工人

  • 听新的鼠标坐标
  • 启动一个持续触发绘图事件的超时间隔（取决于当前坐标和一个聪明的算法）

然而，我认为 Worker 对于一个简单的涂鸦工具来说开销太大了。使用没有像@Esailija 这样的 Worker 演示的简单解决方案。

如果您有一个更复杂的应用程序可以充分利用 Workers，您就不会真正在 onmousedown 上生成它们并终止它们。相反，您可能会为单一类型的工具实例化单个 Workers，并向它们触发开始处理和结束处理事件。

于 2012-10-25T18:40:08.573 回答