2番目のキャンバスに描画することはできません

私は正しい方向に向けることができるのだろうか、私は2回以上繰り返しているHTML 5 Canvasを持っています。
問題は最初のキャンバスを完全にうまく描画できますが、2番目のキャンバスでは2番目のキャンバスに描画できません。なぜ、そして何が解決策ですか？2番目のキャンバスに描画することはできません

<% 
      for(int i = 0; i < 2; i++){ 
     %> 

     <%@page contentType="text/html" pageEncoding="UTF-8"%> 
     <!DOCTYPE html> 
     <html> 
      <head> 
       <link rel="stylesheet" type="text/css" href="css/sketchpad.css"> 
       <script src="http://code.jquery.com/jquery.min.js"></script> 
       <script src="js/sketchpad.js"></script> 
      </head> 
      <body onload="init();"> 
       <div id="main-content"> 
        <canvas id="can" width="600" height="400" ></canvas> 
       </div> 
      </body> 
     </html> 

     <% 
     } 
     %>

出典

2017-01-23 Tony

要素のid値は一意でなければなりません。また、あなたは*全体のページ*の周りにあなたのループを持っているが、これは意味をなさない。 – Pointy

返事をありがとう、私はあなたがちょうど喜びなしで提案したものを含むあらゆる種類の方法を試みました。 – Tony

これらの試行をよく投稿してください。 – Pointy

先のとがったが、前述のようにそれが最善変更されますので、あなたは、ページ全体をループしている、とも、次の2枚の異なるキャンバスそれそれのコンテナに同じIDとを作成しています。私はJSPを知らないので、おそらく変数iを正しく出力する必要があります。しかし、あなたは

<%@page contentType="text/html" pageEncoding="UTF-8" %> 
<!DOCTYPE html> 
<html> 

    <head> 
     <link rel="stylesheet" type="text/css" href="css/sketchpad.css"> 
     <script src="http://code.jquery.com/jquery.min.js"></script> 
     <script src="js/sketchpad.js"></script> 
    </head> 

    <body onload="init();"> 

     <% 
     for(int i = 0; i < 2; i++){ 
     %> 

     <div class="canvas-container-<%= i %>"> 
      <canvas class="canvas-<%= i %>" width="600" height="400" ></canvas> 
     </div> 

     <% 
     } 
     %> 

    </body> 

</html>

はちょうどあなたのJSにしたり、キャンバスを操作どこでも、「.canvas-XXX」を使用してくださいアイデアを得る代わりに「＃（XXXは私変数からの一意のIDです）できる'。

出典

2017-01-23 22:15:37

2番目のキャンバスに描画することはできません

答えて

関連する問題