与IE9的画布上画线条落后

我最近试图用画布创建一个简单的画家。我用mousedown来抓住起点。在mousemove上，我绘制了一条从起点到当前点的线，并用当前点取代了起点。最后，我删除了mouseup上的事件处理程序。这个解决方案在Chrome，Firefox和safari上完美工作，但是当我在IE9上测试它时，我遇到了一个恼人的bug。我绘制的线条只出现在mouseup事件之后。任何想法为什么发生这种情况，我应该如何解决它？与IE9的画布上画线条落后

我添加了一个简单的测试页面来演示问题 http://kfirg.com/rage/main.htm 尝试绘制长线，或圆或类似的东西。在Chrome上它可以很好地工作，但在IE9上它会像疯了一样滞后。

说明：我已经使用jQuery和jCanvas这个简单的画家。我也尝试直接使用canvas API来实现它，并且遇到了同样的问题。

更新的jsfiddle：http://jsfiddle.net/t5QpN/1/

来源

2012-04-13 kfir

我发现这个在线演示 http://ie.microsoft.com/testdrive/Graphics/CanvasPad/Default.html 看看鼠标的演示，它在IE中的作用就像一个魅力，但我似乎无法找到该代码和我的区别。如果有人能帮我弄清楚它的差别，那将会很棒。 – kfir 2012-04-13 19:08:25

在玩过一段时间之后，我发现如果清除画布就像这样 ctx.fillStyle =“rgba（0,0,0,0.05）”; ctx.fillRect（0，0，canvas.width，canvas.height）; 比IE上的表现要好得多，任何人都可以解释为什么？另一种方法是做 canvas.width = canvas.width; canvas.height = canvas.height; – kfir 2012-04-21 15:37:14

你确实有比IE更多的错误。从我的测试中，线条是零星绘制的。

I made a jsFiddle of this to test。

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

那么交易会是什么。我想两件事情

IE是太忙与线程别的东西画的画布，直到鼠标后，一个高达
（相关：1）也许你经常画得和超载

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

希望这会有所帮助！

来源

2012-04-13 14:39:25 scottheckel

这似乎已经做到了！但有一个问题，你使用了哪个函数来进行池化？ setTimeout，setInterval，requestAnimationFrame – kfir 2012-04-13 18:27:32

我用setTimeout，然后根据需要重置它。我不确定这是否重要。 – scottheckel 2012-04-13 18:39:39

很遗憾，我检查了ie的旧版本，并在flashcanvas上运行，而不是本机即一个。它看起来像在flashcanvas上，它的工作原理就像它应该，但在正常的，即它不：（ – kfir 2012-04-13 18:51:17

我觉得你的代码是沉重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();

中风的风格不应该在你的鼠标移动事件被定义，画布会记住的设置。

一个伟大的教程可在歌剧开发中心：http://dev.opera.com/articles/view/html5-canvas-painting/

来源

2012-04-13 18:23:06 jazzytomato

感谢您的提示:) – kfir 2012-04-13 18:30:57

与IE9的画布上画线条落后

回答

相关问题