javascript - Safari 移动版和 Firefox 移动版不会调整和绘制使用 JavaScript 绘制的 Canvas
问题描述
我有一个 HTML 页面,canvas
其中有一个用 JS 绘制轮盘赌的地方
根据CanIuse网站,Firefox 68 和 Safari 4 到 13 支持画布功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>RuLetras 2020.06.20 - MGG</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>
<body style="font-size:14px">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-lg-12">
<label for="txtOptions">Opciones ruleta:</label>
<input id="txtOptions" type="text" value="a,e,i,o,u">
<button id="btnCreate" type="button">Crear</button>
<br>
<label for="selectRoulette">Usar ruleta:</label>
<select id="selectRoulette" name="selectRoulette">
</select>
<button id="btnChangeColors" type="button" disabled>Cambiar colores</button>
<button id="btnSpin" type="button" disabled>Girar !</button>
</div>
<div class="col-md-12 col-sm-12 col-lg-12">
<canvas id="myCanvas" style="border:0px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
</div>
</div>
</div>
<script type="text/javascript" src="ruletra.js"></script>
</body>
</html>
使用JS更改画布大小填充innerWindows的宽度和高度,背景已填充为灰色,以查看画布是否正在绘制。
已发布的版本https://tender-lamport-b738a7.netlify.app/在 Chrome 移动版中正确显示,但在 Firefox 移动版 68.9.0 中显示,并且 Safary 仅显示表单而不显示带有轮盘赌的画布。
由于我对在移动浏览器中调试 HTML 和 Javascript 非常陌生,我需要知道如何调试或确定为什么不正确绘制(类似于访问开发人员工具)
对于这种特殊情况,我还需要一些关于可能导致问题的指示。
解决方案
在尝试使用 Babel 将我的代码转换为更标准(旧)的 javascript 失败后,我在 stackoverflow 中发现有人提到https://jshint.com/来测试你的 javascript 是否存在可能的兼容性问题。
就我而言,我正在使用class
,arrow functions
和其他东西
代码现已更新并正在运行
还有一个用于 Visual Studio Code 的 jshint 插件以及许多其他 linter - https://marketplace.visualstudio.com/items?itemName=dbaeumer.jshint
希望这对将来的人有所帮助
推荐阅读
- python-3.x - 为什么多处理锁获取不起作用?
- c - 运行 C 代码时收到一条消息 free(): invalid pointer,
- c++ - 卷曲 CURLOPT_PROXY 连接没有代理,它忽略代理
- javascript - 如何在 VScode 中使用带有别名的“转到路径”
- python - 用python遍历一个二维数组
- c++ - 检查字符串是否包含子字符串 C++
- python - 如何在for循环后使返回输出打印一次
- python - Iterable-Unpack 导致稍后的函数调用无法正常工作
- xml - 请求在本地笔记本上工作,但在云笔记本上返回 403
- python - 如何在 python 中使用 opencv 防止分段错误