首頁猿問如何讓 p5.js 在特定位置創(chuàng)建畫布

如何讓 p5.js 在特定位置創(chuàng)建畫布

JavaScript

慕姐8265434 2023-01-06 15:16:25

我現(xiàn)在有 1 小時(shí)的 HTML、CSS 經(jīng)驗(yàn)，并且對(duì)編程有更深入的理解，例如使用 java 腳本。所以請?jiān)徫遥绻覍?duì)如何在這里做某事一無所知。我想創(chuàng)建我的 p5 畫布，它也符合我的 CSS 規(guī)則。我該怎么做呢？<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>My website!</title> <link rel="stylesheet" href="main.css"></head><body> <div class="container"> <h1>My Website</h1> <h2>It is all coming together.</h2> <script type="text/javascript" src="p5.js"></script> <script type="text/javascript" src="my_code.js"></script> </div></body></html>我的CSS：body { background-image: url("matt-walsh-tVkdGtEe2C4-unsplash.jpg"); background-repeat: no-repeat; background-size: cover;}.container { background-color: hsla(0, 0%, 50%, 0.8); height: auto; width: fit-content; padding: 0px 250px;}h1 { text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 10vw; font-family: Arial; color: white; text-align: center;}h2 { text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 5vw; font-family: Arial; color: white; text-align: center;}p { font-family: Arial; color: black; text-align: left; max-width: 200vw;}script { alignment: center;}為了完成起見：function setup() { createCanvas(400, 400);}function draw() { if (mouseIsPressed) { fill(0); ellipse(mouseX, mouseY, 80, 80); }}這將創(chuàng)建此頁面：

查看完整描述

1 回答

慕虎7371278

TA貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超4個(gè)贊

您可以做的是div直接在您的 html 中創(chuàng)建包含畫布的

<body>

<h1>My Website</h1>

<h2>It is all coming together.</h2>

</div>

</body>

然后在您的setup()函數(shù)中創(chuàng)建畫布并將其放入div：

const myCanvas = createCanvas(400, 400);

myCanvas.parent('canvasDiv');

這應(yīng)該給你與你已經(jīng)擁有的結(jié)果相同的結(jié)果，但現(xiàn)在在你的 css 中你可以設(shè)置這個(gè) div 的樣式，從而改變它的位置：

#canvasDiv {

// your canvas style

}

現(xiàn)在更改畫布的位置只是div在 html 中定位 a 的問題。有很多不同的方法可以做到這一點(diǎn)，具體取決于您到底想做什么，但是您應(yīng)該能夠在線找到一些關(guān)于該內(nèi)容的好資源。

同樣正如@Georges 在評(píng)論中指出的那樣，您的 CSS 文件的這一部分沒有意義：

script {

alignment: center;

}

您正在嘗試對(duì)齊您的script標(biāo)簽，但這些標(biāo)簽僅用于獲取一些 javascript，它們不會(huì)顯示在頁面中。并且應(yīng)用于這些標(biāo)簽的樣式不會(huì)影響由您的 javascript 代碼處理/創(chuàng)建的 HTML 元素，因此此 CSS 無用。

反對(duì) 回復(fù) 2023-01-06