Question

我最近尝试使用画布创建一个简单的画家。我用mousedown来捕捉起点。在鼠标移动时，我从起点到当前点画一条线，并用当前点替换起点。最后，我在mouseup上删除了事件处理程序。这个解决方案在Chrome，Firefox和Safari上运行得很好，但是当我在IE9上测试时，我遇到了一个令人讨厌的bug。我绘制的线只出现在mouseup事件之后。关于为什么会发生这种情况的任何想法以及我该如何解决它？

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

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

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

Answer 1

你实际上有比IE更多的错误。从我的测试中，偶尔绘制线条。

I made a jsFiddle of this to test。

我没有答案只是想法。我从来没有像这样使用铅笔绘图类型的画布应用程序，我已经在鼠标停机时进行了轮询。很明显，如果你看一下控制台，你的绘图代码是在IE中运行的。鼠标移动必须按照您的要求进行射击。

那么这笔交易究竟是什么呢。我在想两件事之一

IE忙于在线程中用其他东西绘制画布，直到鼠标开始后
（与1相关）也许你经常画画并超载它

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

希望这有帮助！

Answer 2

我认为您的代码对于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/

画布上的线条与IE9滞后

2 个答案: