连接到MySQL数据库时没有动画

时间:2015-08-31 12:48:55

标签: javascript mysql html5 jsp

我正在尝试根据从MySQL数据库检索到的x和y轴的位置在html5画布中移动一个对象。当我没有数据库的时候,代码工作正常。但是在将页面连接到数据库之后,没有任何动作。

请告诉我哪里出错了。或者还有其他方法可以做到这一点。

请不要建议切换到PHP。

的index.jsp

scala> val hm = Map( 1 -> "Hello")
hm: scala.collection.immutable.Map[Int,String] = Map(1 -> Hello)

scala> for (i <- hm.get(2) ) { println(i) }

scala> for (i <- hm.get(1) ) { println(i) }
Hello

这是我将页面连接到数据库的文件。

connectToDB.jsp

<%@page center code here`ontentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style type="text/css">
       #canvas{
           border: #666 2px solid;
       }
    </style>
    <script type="text/javascript">

       function draw(x,y)
       {
          var canvas=document.getElementById('canvas');
          var ctx=canvas.getContext('2d');
          ctx.save();
          ctx.clearRect(0,0,550,400);
          ctx.fillStyle="rgba(0,200,0,1)";
          <%@include file="connectToDB.jsp"%>
          <%
            int a,b;
            String sql="SELECT * FROM movement_details";
            try{
               rs = stmt.executeQuery(sql);
               while (rs.next()) 
              {
                 a=Integer.parseInt(rs.getString(4));
                 b=Integer.parseInt(rs.getString(5));
           %>
            var x="<%=a%>";
            var y="<%=b%>";

            ctx.fillRect(x,y,30,30);
            ctx.restore();  

           setTimeout(100);
        <%
             }
          }catch (Exception e) 
          {
            e.printStackTrace();
          }finally 
          {
              try { if (rs != null) rs.close(); } catch (SQLException e) { e.printStackTrace(); }
             try { if (stmt != null) stmt.close(); } catch (SQLException e) { e.printStackTrace(); }
             try { if (conn != null) conn.close(); } catch (SQLException e) { e.printStackTrace(); }
         }
         %>
      }

  </script>
</head>

<body onload="draw();">
    <canvas id="canvas" width="550" height="400"></canvas> 

    <!--<button onclick="draw('x','y');">Draw</button>-->

</body>
</html>

0 个答案:

没有答案