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