Question

我如何以画布为中心？我已经尝试过命令＆lt;中心]，[但是左上角居中，但我希望我的画布中间是中心。

这是我想要居中的画布：http://www.inserttalent.nl/~gm15561/project_1.2/periode2.html

我使用html5 Kineticjs和javascript。

我希望你能帮助我。

Answer 1

如果我理解你的问题，你可以提出：

#myCanvas {
    border: 1px solid #9C9898;
    background-color:#CFF;
    position:absolute;
    left:100px; // go messing with the value until it's centered.
}

或

#myCanvas {
    border: 1px solid #9C9898;
    background-color:#CFF;
    position:center;
}

希望这有帮助！

Answer 2

使用CSS。尝试，

@hash = '{
  "type": "regular",
  "response": {
    "Records": "137",
    "rRecords": 137,
    "startOffset": "0",
    "endOffset": "500",
    "matchingDataElementCount": "-1",
    "results": [
      { "pluginID": "11112",
        "ip": "100.100.100.100",
        "pluginName": "Name for plugin here",
        "firstSeen": "1444208776",
        "lastSeen": "1451974232",
        "synopsis": "synopsis contents",
        "description": "Full description would go here... Full description would go here... Full description would go here... Full description would go here... Full description would go here...",
        "solution": "",
        "version": "Revision: 1.51",
        "pluginText": "output text here",
        "dnsName": "name",
        "repository": {
          "id": "1",
          "name": "Name Here As Well",
          "description": "Description here also"
        },
        "pluginInfo": "11112 (0/6) Name for plugin here"
      },
      { "pluginID": "11113",
        "ip": "100.100.100.100",
        "pluginName": "Name for plugin here",
        "firstSeen": "1444455329",
        "lastSeen": "1451974232",
        "synopsis": "Tsynopsis contents",
        "description": "Full description would go here... Full description would go here... Full description would go here... Full description would go here... Full description would go here...",
        "solution": "",
        "version": "Revision: 1.51",
        "pluginText": "output text here",
        "dnsName": "name here",
        "repository": {
          "id": "1",
          "name": "Name Here As Well",
          "description": "Description here also"
        },
        "pluginInfo": "11112 (0/6) Name for plugin here"
      },
      { "pluginID": "11113",
        "ip": "100.100.100.100",
        "pluginName": "Name for plugin here : Passed",
        "firstSeen": "1444455329",
        "lastSeen": "1444455329",
        "synopsis": "nope, more synopsis data here",
        "description": "Uanother different description",
        "solution": "",
        "version": "Revision: 1.14",
        "pluginText": "",
        "dnsName": "name here",
        "repository": {
          "id": "1",
          "name": "Name Here As Well",
          "description": "Description here also"
        },
        "pluginInfo": "11114 (0/6) Name for plugin here : Passed"
      },
      { "pluginID": "11115",
        "ip": "100.100.100.100",
        "pluginName": "Name for plugin here",
        "firstSeen": "1444455329",
        "lastSeen": "1444455329",
        "synopsis": "Tsynopsis contents",
        "description": "Full description would go here... Full description would go here... Full description would go here... Full description would go here... Full description would go here...",
        "solution": "",
        "version": "Revision: 1.51",
        "pluginText": "output text here",
        "dnsName": "",
        "repository": {
          "id": "1",
          "name": "Name Here As Well",
          "description": "Description here also"
        },
        "pluginInfo": "11116 (0/6) Name for plugin here"
      }
    ]
  },
  "code": 0,
  "msg": "",
  "msg_det": [],
  "time": 1454733549
}'

Answer 3

//Canvas stuff
	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext("2d"); 
	ctx.fillStyle = "black";
	ctx.fillRect(0, 0, 30, 30);

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>
    <canvas id= "canvas"  width=30px; height=30px; style='display: block;margin: auto;' ></canvas>
</body>
</html>

Answer 4

使用简单的CSS。

尝试

Canvas {

    Width: 300px;
    Margin: 0 auto;
    Vertical-align: middle;

}

如何将画布置于屏幕中间

4 个答案: