0

我很难弄清楚程序失败的原因。我正在编写一个生成画布的代码生成器，但我的专长是使用常规编译语言，而不是 javascript、canvas 或 web。

我在 Dreamweaver 中对一些代码进行原型设计，碰巧在第一行之前不小心放了一个问号。据我了解，问号使标头无效，并允许浏览器以怪癖模式运行。

当我发现无效的标头时，我删除了问号，我的工作应用程序开始失败。我一直在简化代码并提取一些东西，试图找出无效的代码，但我只剩下不到 30 行，找不到它，我可以提取的东西很少，但仍然完成了基本操作 -在画布上放置一个 SELECT 列表。

当此代码在大多数浏览器中运行时，它会一直工作，直到您删除文件顶部的问号。当它失败时，文本“对齐我”出现在页面中间，并且选择选项组合框放置在页面原点。有人可以告诉我代码有什么问题吗？

*<!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。

将画布从表单元素中取出！

然后使 wrapper-div 位置：相对以及表单和画布位置：绝对

结果...您的选择元素在您想要的位置对齐！

这是代码和小提琴：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 回答
0

我对 markE 的回答给予了肯定。他有很多很好的建议，并指出了答案。在研究了他的解决方案后，我发现我真正需要的只是 javascript 设置位置的正确格式。我有“ele.style.top = 140;” 而我应该拥有的是“ele.style.top = '140px';”。因此，这是一个更改最少的解决方案（这将成为计算机生成的代码，而不是手动维护的东西，所以我不关心诸如拉出样式表之类的更改）。这是解决方案的一个小提琴：http: //jsfiddle.net/vfanberg/KCZ5g/

<!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 = '140px';
    ele.style.left= '140px';
  </script> 
</body>
</html>
于 2013-07-06T02:33:04.323 回答