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