1

2 つの jquery mobil HTML5 ファイルがあり、それぞれにナビゲーション バーとキャンバスがあります。最初にページ 1 を読み込むと、キャンバスは正常に描画されます。最初にページ 2 をロードすると、キャンバスは正常に描画されます。しかし、ナビゲーション バーを使用して 1 ページから 2 ページに切り替えると、何も描画されません。ページ 2 を更新すると描画されますが、ページ 1 に戻るとキャンバスの描画に失敗します。私は何を間違っていますか？

以下のコードは 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