如何在 post 限制内插入 HTML5 canvas？

Question

我正在 Blogger 中试验 JavaScript。有用。但我不知道如何重新定位 canvas，因为它出现在页面底部。我希望它是 "inside a post"。你可以看看。我想要 canvas 内联，就在 post 标题 (Muerte) 的下方。

http://safetyinsolitude.blogspot.mx/p/muerte.html

比如，这可能吗？

此外，对于 js 部分，我使用 p5.js。太简单了，也许我可以在里面放点东西。

HTML代码：

<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.12/p5.js"></script>
<script src="p5/addons/play/lib/p5.play.js" type="text/javascript"></script> 
<!--<script language="javascript" src="../addons/p5.sound.js"></script>-->
<script language="javascript" type="text/javascript" src="https://googledrive.com/host/0B6EuBapi745ZOXIycnNGX0s4UHM"></script>

<title>Muerte y seducción</title>
</head>
<body>

</body>
</html>

JS代码：

function setup() {
  // uncomment this line to make the canvas the full size of the window
  createCanvas(640, 480);
}

function draw() {
  // draw stuff here
  fill(random(255), random(255), random(255));
  text("Dante mamabergas", mouseX, mouseY);
  ellipse(width/2, height/2, random(200), random(200));
}

Answer 1

调用创建后 canvas:

function setup() { // uncomment this line to make the canvas the full size of the window createCanvas(640, 480); }

只需使用 document.querySelector(".hentry").insertBefore(document.getElementById("defaultCanvas"),document.querySelector(".hentry .post-header"));

它很难看，但要么就是这样，要么改变 p5.js

Answer 2

您可以使用 parent() 方法将 canvas 放置在特定的 div 中。 http://p5js.org/reference/#p5.Element/parent

如何在 post 限制内插入 HTML5 canvas？

How can I insert the HTML5 canvas inside the post limits?

javascript

html

canvas

blogger

p5.js