1

我有两个 jquery mobil HTML5 文件，每个文件都有一个导航栏和一个画布。如果我先加载第一页，画布就画好了。如果我先加载第 2 页，画布就画好了。但是，如果我使用导航栏从一页切换到第二页，则什么也画不出来。如果我刷新第二页，它现在已绘制，但如果我导航回第一页，则无法绘制画布。我究竟做错了什么？

下面的代码是为 page1.html 保存并复制到 page2.html 并更改圆圈的颜色。

<!DOCTYPE html>
<html>
    <head>
        <title>Compass</title>
        <style type="text/css">
        .unselectable {
            -moz-user-select: none;
            -webkit-user-select: none;
        }
        </style>
        <link rel="stylesheet" href="jquery/jquery.mobile-1.3.1.css"></link>
        <script language="JavaScript" type="text/javascript" src="jquery/jquery-1.10.1.js"></script>
        <script language="JavaSCript" type="text/javascript" src="jquery/jquery.mobile-1.3.1.js"></script>
        </style>

        <script type="text/javascript">
            window.onload = function() {
                var ctx = document.getElementById('myDrawing').getContext('2d');
                var scale = 1.2;
                var size = 300;
                var halfSize = size / 2;
                var center = size * scale * 1.1;
                var ring = size;
                    // setup
                    ctx.clearRect(0, 0, 800, 800);
                    ctx.translate(center, center);
                    ctx.scale(scale, scale);
                    ctx.rotate(-Math.PI / 2);
                    ctx.strokeStyle = "black";
                    ctx.fillStyle = "white";
                    ctx.lineWidth = 8;
                    ctx.lineCap = "round";

                    // fill in the back color
                    ctx.fillStyle = '#ffe8c0';
                    ctx.arc(0, 0, ring, 0, Math.PI * 2, true);
                    ctx.fill();
            }
        </script>
    </head>

<body style="z-index:1.5;"> 
    <div data-role="page" id="dial" class="unselectable" align="center" >
        <!--HEADER DIV-->
        <div data-role="header" align="center" data-nobackbtn="true" >
            <h1 id="Title" value="">COMPASS </h1>

            <div data-role="page" id="Menu" class="unselectable" >
                <div
                   style="top: 1;
                          left: 1;
                          position: absolute;
                          z-index: 1;
                          visibility: show;">
                </div>
            </div><!-- /page -->
        </div><!-- /header -->
        <canvas id="myDrawing" width="800" height="800" >
            <p>Your browser doesn't support canvas.</p>
        </canvas>
        <div class="ui-bar-a unselectable" data-role = "footer" data-id="foo" data-position="fixed">
            <div class="" data-inline="true" >
                    <div data-role="controlgroup" data-type="horizontal" align="center" >
                        <a href="page1.html" data-role="button"  id="dial" >Compass</a>
                        <a href="page2.html" data-role="button" id="wind">Wind</a>
                    </div>
            </div>
        </div><!-- /footer -->
    </div> <!-- /Div1 -->
</body>
</html>
4

0 回答 0