Safari mobile和Firefox mobile没有调整和绘制使用JavaScript绘制的画布_Javascript_Html_Css_Bootstrap 4_Html5 Canvas

Safari mobile和Firefox mobile没有调整和绘制使用JavaScript绘制的画布

javascript html css bootstrap-4 html5-canvas

Safari mobile和Firefox mobile没有调整和绘制使用JavaScript绘制的画布,javascript,html,css,bootstrap-4,html5-canvas,Javascript,Html,Css,Bootstrap 4,Html5 Canvas,我有一个HTML页面，它有一个画布，其中一个轮盘赌是用JS绘制的根据网站的说法，Firefox 68和Safari 4至13支持画布功能 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge&quo

我有一个HTML页面，它有一个

画布

，其中一个轮盘赌是用JS绘制的

根据网站的说法，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>


RuLetras 2020.06.20-MGG
Opciones ruleta：
克雷尔


Usar规则a：
柬埔寨色
吉拉尔！
您的浏览器不支持HTML5画布标记。

使用JS更改画布的大小，以填充内部窗口的宽度和高度，并将背景填充为灰色，以查看是否正在绘制画布

已发布的版本在Chrome Mobile中正确显示，但在Firefox Mobile 68.9.0和Safary中仅显示表单，而没有显示带轮盘赌的画布

由于我对在移动浏览器中调试HTML和Javascript非常陌生，我需要知道如何调试或确定为什么不正确绘制（类似于使用开发人员工具）

对于这个特殊的情况，我还需要一些关于什么可能导致问题的指针

尝试使用Babel将我的代码转换成更标准（更旧）的javascript失败后，我在stackoverflow中找到了一个人，他提到要测试javascript的兼容性问题

在我的例子中，我使用了

类

，

箭头函数

和其他东西

代码现在已经更新并正在运行

还有一个jshint插件，用于Visual Studio代码以及许多其他linter-

希望这对将来的人有所帮助