1

我最近尝试使用画布创建一个简单的画家。我使用 mousedown 来捕获起点。在 mousemove 上，我从起点到当前点画了一条线，并用当前点替换了起点。最后我删除了 mouseup 上的事件处理程序。这个解决方案在 Chrome、Firefox 和 safari 上运行良好，但是当我在 IE9 上测试它时，我遇到了一个烦人的错误。我绘制的线条仅在 mouseup 事件之后出现。关于为什么会发生这种情况以及我应该如何解决它的任何想法？

我添加了一个简单的测试页面来演示这个问题 http://kfirg.com/rage/main.htm 尝试画一条长线，或者一个圆圈或类似的东西。在 chrome 上它可以完美运行，但在 IE9 上它会像疯了一样滞后。

注意：我使用 jQuery 和 jCanvas 来制作这个简单的画家。我也尝试直接使用canvas api自己实现它，我遇到了同样的问题。

更新了 jsFiddle：http: //jsfiddle.net/t5QpN/1/

4

2 回答 2

1

实际上，您的错误比 IE 中的错误多。根据我的测试，线条是零星地画出来的。

我做了一个 jsFiddle 来测试。

我没有答案，只有想法。我从来没有用过这样的铅笔画类型的画布应用程序，当鼠标按下时我已经完成了轮询。很明显，如果您查看控制台，您的绘图代码正在 IE 中按预期运行。鼠标移动必须尽可能多地射击。

那么这笔交易可能是什么。我在想两件事之一

  1. IE 忙于线程中的其他内容，无法在鼠标启动之前绘制画布
  2. （相关1）也许你画得太频繁了，超载了

如果这两个中的任何一个是正确的，我认为您需要切换到每 X 毫秒轮询一次鼠标的位置。它不会给你带来流畅的线条，但你可以调整 X 直到它看起来不错。

希望这可以帮助！

于 2012-04-13T14:39:25.217 回答
1

我认为您的代码对于 mousemove 事件来说很重：

 var fncMouseMoveHandler = function (e) {
        console.log('Move!', 'e', { x: e.offsetX, y: e.offsetY }, 'prev', prev);
        $main_canvas.drawLine({
            strokeStyle: settings.color,
            strokeWidth: 2,
            strokeCap: "round",
            strokeJoin: "miter",
            x1: prev.x,
            y1: prev.y,
            x2: e.offsetX,
            y2: e.offsetY
        });
        prev = { x: e.offsetX, y: e.offsetY };
    }

您正在使用 API，应用样式并计算不需要的东西。绘图代码应该很简单：你得到坐标，然后用：

context.lineTo(x, y);
context.stroke();

笔画的样式不应在 mousemove 事件中定义，画布会记住设置。

Opera 开发中心提供了一个很棒的教程：http ://dev.opera.com/articles/view/html5-canvas-painting/

于 2012-04-13T18:23:06.737 回答