HTML5/JavaScript File with Canvas 不适用于 Windows 8 上的 Chrome 和 Firefox，但适用于 Windows 7 上的所有浏览器。为什么？

Question

我对这个简单的html5文件有一个问题:

 var canvas = window.__canvas = new fabric.Canvas('c');
 canvas.backgroundColor = '#efefef';
 canvas.freeDrawingBrush.width = 10;
 canvas.renderAll();
 document.getElementById('drawingMode').addEventListener('click', function(e) {
   e.target.innerHTML = canvas.isDrawingMode ? 'Start freedrawing' : 'End freedrawing';
   canvas.isDrawingMode = !canvas.isDrawingMode;
 });

canvas {
  border: 1px solid #ccc;
  padding: 20px;
}
/*.canvas-class {
    border-left: 20px solid black;
    padding: 20px;
}*/

<button id="drawingMode">Start freedrawing</button>
<div class="wrapper">
  <canvas id="c" class="canvas-class" width="400" height="300" style="border:1px solid #ccc;"></canvas>
</div>

这是一个简单的html5文件与javascript实现，你可以简单地绘制在画布上。它可以在Windows 7(我的旧笔记本电脑)上的所有浏览器上正常运行。但有了Chrome &;Windows 8(我的新笔记本电脑)上的火狐浏览器不能画任何东西，它不能工作!

windows 7的绘图模式:

• 铬:好的
• firefox:好的
• 歌剧:好的
• 问世:好的
• safari:好的

windows 8的绘图模式:

• chrome: NO
firefox:
• 没有
• 歌剧:好的
• 问世:好的
• safari:好的

谁能告诉我出了什么问题?很奇怪，DrawingMode不能在chrome和firefox上工作，但在Windows 8下的opera, IE10和Safari上工作得很好。

Answer 1

Fabric.js认为你的Chrome/Firefox已经启用了触摸，所以它将自己附加到触摸事件而不是鼠标事件。

我不太清楚这是Chrome/Firefox还是fabric或两者中的错误。

看这个https://github.com/kangax/fabric.js/issues/670还有这个https://github.com/kangax/fabric.js/issues/450

Answer 2

我假设你的Windows 7笔记本电脑没有触摸功能。这意味着所有浏览器都必须捕获鼠标/触控板事件。然而，如果你有一台Windows 8触屏笔记本电脑，浏览器可以有不同的输入源(例如触摸板或触摸屏)。不同的浏览器可能使用不同的实现来处理每个输入，从而导致您所看到的差异。