绘制到HTML画布不正确

Question

我正在尝试绘制HTML画布。我在1000x1000像素画布中输入了50个圆圈和一堆线条。应该出现所有圈子。相反，我明白了

我相信正在发生的事情是将事物绘制到默认大小的画布上，然后画布就会增长。除了我的Style标签在任何JavaScript代码绘制到画布之前。我该如何解决这个问题

我的代码位:(通过Servlet编写）

out.println("<style> \n canvas{\nheight:1000px;\nwidth:1000px;\n}\n</style>");
out.println("<canvas id=\"c\" style=\"border:1px solid #000000;\">Test</canvas>");
process(render, out);
public void process(String input, PrintWriter out)
{
    out.println("<p id=\"input\" style = \"display:none\">"+input+"</p>");
    out.println("<script>\n"+
    "var JSONProcess = function(){\n" +
    "   var JSONInfo = document.getElementById(\"input\");\n" +
    "   var Json = JSON.parse(JSONInfo.innerHTML);\n" +
    "   var canvas = document.getElementById(\"c\");\n" +
    "   var c = canvas.getContext(\"2d\");\n" +
    "   if(Json.nodes != null)\n" +
    "   {\n" +
    "       var n = Json.nodes;\n" +
    "       for(var i=0; i< n.length; i++)\n" +
    "       {\n" +
    "           c.beginPath();\n" +
    "           c.arc(n[i].x+500,n[i].y+500,n[i].size,0,2*Math.PI, false);\n" +
    "           c.stroke();\n" +
    "       }\n" +
    "   }\n" +
    "   if(Json.edges != null)\n" +
    "   {\n" +
    "       var e = Json.edges;\n" +
    "       for(var i=0; i< n.length; i++)\n" +
    "       {\n" +
    "           var s = e[i].source;\n" +
    "           var t = e[i].target;\n" +
    "           c.beginPath();\n" +
    "           c.moveTo(s.x+500, s.y+500);\n" +
    "           c.lineTo(t.x+500, t.y+500);\n" +
    "           c.stroke();\n" +
    "       }\n" +
    "   }\n" +
    "}\n" +
    "JSONProcess();</script>");

      }

我已经读完了所有输入值。 x和y值的范围从-500到500，我移动它们适合画布，值为0-1000

Answer 1

如果粘贴代码会很有帮助，但请确保在canvas元素上设置了height和width属性。

Answer 2

HTML5中的

画布高度和宽度未通过样式定义。它们是单独定义的。 它必须是out.println("<canvas id=\"c\" height =\"1000\" width=\"1000\" style=\"border:1px solid #000000;\">Test</canvas>");