带有Canvas的HTML5 / JavaScript文件无法在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（我的旧笔记本电脑）上的所有浏览器。 但是使用Windows 8上的Chrome和Firefox（我的新笔记本电脑）你无法绘制任何东西，它不起作用！

Windows 7上的绘图模式：

• 铬：好的
• firefox：好的
• 歌剧：好的
• ie10：好的
• safari：好的

Windows 8上的绘图模式：

• 铬： 没有
• 火狐： 没有
• 歌剧：好的
• ie10：好的
• 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触控笔记本电脑，则浏览器可以使用不同的输入源（例如触控板或触摸屏）。 不同的浏览器可能会使用不同的处理每个输入的实现，从而导致您看到的这种差异。