javascript - 绘制到 HTML Canvas 不正确地增长

Question

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

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

我的代码位:(通过 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 的 Canvas

Answer 1

如果您粘贴代码会很有帮助，但请确保在 Canvas 元素上设置了高度和宽度属性。