javascript - 带有 Canvas 的 HTML5/JavaScript 文件不适用于 Windows 8 上的 Chrome 和 Firefox,但适用于 Windows 7 上的所有浏览器。为什么?

标签 javascript windows html canvas fabricjs

我对这个简单的 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>

这是一个带有 javascript 实现的简单 html5 文件,您可以在其中简单地在 Canvas 上绘图。它适用于 Windows 7(我的旧笔记本电脑)上的所有浏览器。 但是在 Windows 8 上使用 Chrome 和 Firefox(我的新笔记本电脑)你不能画任何东西,它不起作用!

Windows 7 上的绘图模式:

  • Chrome :好的
  • 火狐:好的
  • 歌剧:好的
  • ie10:好的
  • Safari :好的

Windows 8 上的绘图模式:

  • Chrome :
  • 火狐:
  • 歌剧:好的
  • ie10:好的
  • Safari :好的

有人可以请问是什么问题吗?奇怪的是,DrawingMode 在 chrome 和 firefox 上不起作用,但在 Windows 8 下的 opera、IE10 和 Safari 上工作正常。

最佳答案

Fabric.js 认为您的 Chrome/Firefox 启用了触摸功能,因此它会将自己附加到触摸事件而不是鼠标事件。

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

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

关于javascript - 带有 Canvas 的 HTML5/JavaScript 文件不适用于 Windows 8 上的 Chrome 和 Firefox,但适用于 Windows 7 上的所有浏览器。为什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17145235/

相关文章:

javascript - 如何使用 jQuery 重置或取消选择多选框?

c# - 如何从客户端访问服务器端WebControl?

windows - 从 C++ 源文件创建 Windows DLL

c++ - 从纯 C 使用 Windows 运行时 API

Jquery:要在下拉列表中从一个页面切换到另一页面,请单击

javascript:当窗口到达顶部时

javascript - 如何判断滚轮事件是否发生在带有滚动条的元素上?

javascript - 如何使用 JavaScript 以编程方式设置选择框元素的值?

node.js - 不同包共享的 npm 依赖被安装两次

javascript - 预加载 html 网页或非 flash web 应用程序?