0

プログラムが失敗する理由を理解するのに苦労しています。キャンバスを生成するコード ジェネレーターを書いていますが、私の専門は通常のコンパイル言語であり、javascript、キャンバス、Web ではありません。

Dreamweaver でいくつかのコードのプロトタイプを作成していたときに、たまたま最初の行の直前にアスケリスクを付けてしまいました。私が理解しているように、アスケリスクはヘッダーを無効にし、ブラウザをクワークモードで実行できるようにしました。

無効なヘッダーを発見したとき、askerisk を削除すると、作業中のアプリケーションが失敗し始めました。私はコードを単純化し、無効なコードを見つけようとして何かを引き出し続けました.30行未満になり、それを見つけることができず、引き出すことができるものはほとんどなく、基本的な操作を行ったままにしています-キャンバス上に SELECT リストを配置します。

このコードをほとんどのブラウザーで実行すると、ファイルの一番上にある askerisk を削除するまで機能します。失敗すると、「Align me」というテキストがページの中央に表示され、SELECT OPTION コンボ ボックスがページの原点に配置されます。誰かがコードの何が問題なのか教えてもらえますか?

*<!doctype html>
<html>
<head>
  <form id='h1'; style='position:relative'>
    <div id='d1' style="position:absolute; top:0; left:0; z-index:1">
      <canvas id="c1" width="310" height="300" style="border:1px solid #d3d3d3">
        Your browser does not support the HTML5 canvas tag.
      </canvas>
    </div>

     <select id='s1' style='position:absolute; z-index:2'>
        <option value='Please select'>Please select</option>
     </select>
  </form> 
</head>
<body>
  <script type="text/javascript">
    var can=document.getElementById("c1");
    var ctx = can.getContext("2d");   
    ctx.font = 'bold 18px Arial, Helvetica, sans-serif';;
    ctx.textAlign='right';
    ctx.fillStyle ='#CCC';      
    ctx.fillText("Align Me", 130, 160);

    var ele = document.getElementById('s1');
    ele.style.top = 140;
    ele.style.left= 140;
  </script> 
</body>
</html>
4

2 に答える 2

1

フォームとキャンバス要素の周りにラッパー div を配置します。

フォーム要素からキャンバスを取り出してください!

次に、ラッパー div を position:relative にし、フォームとキャンバスの両方を position:absolute にします。

結果...選択要素が必要な場所に配置されました!

ここにコードとフィドルがあります: http://jsfiddle.net/m1erickson/5UzhE/

<!doctype html>
<html>
<style>
#wrapper{position:relative;}
#d1{position:absolute top:0; left:0; z-index:1; }
#c1{width:310px; height:300px; border:1px solid #d3d3d3;}
#h1{position:absolute; top:140px; left:140px; z-index:2; }
</style>
<head>
  <div id="wrapper" style='position:relative'>

    <form id='h1';>
      <select id='s1' style='position:absolute; z-index:2'>
          <option value='Please select'>Please select</option>
      </select>
    </form> 

    <div id='d1'>
      <canvas id="c1" width="310" height="300">
        Your browser does not support the HTML5 canvas tag.
      </canvas>
    </div>

  </div>
</head>
<body>
  <script type="text/javascript">
    var can=document.getElementById("c1");
    var ctx = can.getContext("2d");   
    ctx.font = 'bold 18px Arial, Helvetica, sans-serif';;
    ctx.textAlign='right';
    ctx.fillStyle ='#CCC';      
    ctx.fillText("Align Me", 130, 160);
  </script> 
</body>
</html>
于 2013-07-06T00:52:32.527 に答える