如何將p5.js畫布放在html div中

我想將p5.js添加到我網頁中某個部分的背景。我是JavaScript新手，無法弄清楚如何將兩部分綁定在一起。如何將p5.js畫布放在html div中

2016-02-26 Meghan Rose

P5.js爲您提供了一個html canvas，您可以使用它來定位草圖。

Here是使用帆布作爲div的背景的一個示例：

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
     canvas { 
      position:absolute; 
      top:0; 
      left:0; 
      width:100%; 
      height:100%; 
      z-index:-1; 
     } 
    </style> 

</head> 
<body> 
    <h1>Heading</h1> 
    <p>paragraph 1</p> 
    <p>paragraph 2</p> 
    <script src="processing-1.4.1.min.js"></script> 
    <div id="canvasContainer"> 
    <canvas data-processing-sources="rectangles.pde"></canvas> 
    </div> 
</body>

這是Processing.js代替P5.js，但思路是一樣的。嘗試使用類似「HTML canvas作爲背景」的搜索功能獲得大量結果。嘗試一下，如果卡住了，請發帖MCVE。

來源

2016-02-27 16:08:03

您需要在您的設置中添加代碼。

確保您必須在html中的腳本標記中運行。請注意，您不要在.parent（）中添加＃。

var myCanvas = createCanvas(winWidth, winHeight); 
    myCanvas.parent("idnameofdiv");

來源

2016-04-11 05:31:04

如何將p5.js畫布放在html div中

回答

相關問題