Question

我正在弄清楚程序失败的原因。我正在编写一个生成canvas的代码生成器，但我的专家是常规编译语言，而不是javascript，canvas，也不是web。

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

当我发现无效标题时，我删除了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>

Answer 1

在表单和画布元素周围放置一个包装器div。

从画布元素中取出画布！

然后制作wrapper-div位置：relative和形式＆amp;画布位置：绝对

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

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

Answer 2

我给了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>

在画布上对齐HTML元素

2 个答案: