Question

我想知道是否有人可以指出我正确的方向，我有一个HTML 5 Canvas，我迭代了两次。
问题是我可以在第一个画布上绘制完全正常但不是第二个，我无法在第二个画布上绘制。为什么以及解决方案是什么？

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

        <%
        }
        %>

Answer 1

正如Pointy所提到的，你正在循环整个页面，所以最好改变，而且，你要创建两个不同的画布＆＃39;但具有相同的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或你操纵画布的任何地方，使用＆＃39; .canvas-XXX＆＃39; （XXX是 i 变量中的唯一ID），而不是＆＃39;＃can＆＃39;。

无法在第二个画布上绘制

1 个答案: