Javascript 无法在第二个画布上绘制_Javascript_Html_Jsp_Canvas

Javascript 无法在第二个画布上绘制

javascript html jsp canvas

Javascript 无法在第二个画布上绘制,javascript,html,jsp,canvas,Javascript,Html,Jsp,Canvas,我想知道是否有人能给我指出正确的方向，我有一个HTML5画布，我正在迭代两次。问题是我可以在第一张画布上画得很好，但第二张画布不行，我不能在第二张画布上画。为什么？解决方案是什么 <% for(int i = 0; i < 2; i++){ %> <%@page contentType="text/html" pageEncoding="UTF-8"%> <!DOCTYPE html

我想知道是否有人能给我指出正确的方向，我有一个HTML5画布，我正在迭代两次。
问题是我可以在第一张画布上画得很好，但第二张画布不行，我不能在第二张画布上画。为什么？解决方案是什么

<% 
            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>

        <%
        }
        %>

正如Pointy所提到的，您正在循环整个页面，因此这将是最好的更改，而且，您正在创建两个不同的画布，但其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是i变量中的唯一id）而不是“#can”。

元素上的id值必须是唯一的。另外，你在整个页面上都有你的循环，这没有多大意义。谢谢你的回复，我已经尝试了各种方法，包括你刚才的建议，但没有任何乐趣。那么我们就发布这些尝试吧。“我原以为这会行得通，但运气不好。”