亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何讓 p5.js 在特定位置創建畫布

如何讓 p5.js 在特定位置創建畫布

慕姐8265434 2023-01-06 15:16:25
我現在有 1 小時的 HTML、CSS 經驗,并且對編程有更深入的理解,例如使用 java 腳本。所以請原諒我,如果我對如何在這里做某事一無所知。我想創建我的 p5 畫布,它也符合我的 CSS 規則。我該怎么做呢?<!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);    }}這將創建此頁面:
查看完整描述

1 回答

?
慕虎7371278

TA貢獻1802條經驗 獲得超4個贊

您可以做的是div直接在您的 html 中創建包含畫布的


<body>

    <div class="container">

        <h1>My Website</h1>

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


        <div id="canvasDiv"></div>

    </div>

</body>

然后在您的setup()函數中創建畫布并將其放入div:


const myCanvas = createCanvas(400, 400);

myCanvas.parent('canvasDiv');

這應該給你與你已經擁有的結果相同的結果,但現在在你的 css 中你可以設置這個 div 的樣式,從而改變它的位置:


#canvasDiv {

    // your canvas style

}

現在更改畫布的位置只是div在 html 中定位 a 的問題。有很多不同的方法可以做到這一點,具體取決于您到底想做什么,但是您應該能夠在線找到一些關于該內容的好資源。


同樣正如@Georges 在評論中指出的那樣,您的 CSS 文件的這一部分沒有意義:


script {

    alignment: center;

}

您正在嘗試對齊您的script標簽,但這些標簽僅用于獲取一些 javascript,它們不會顯示在頁面中。并且應用于這些標簽的樣式不會影響由您的 javascript 代碼處理/創建的 HTML 元素,因此此 CSS 無用。


查看完整回答
反對 回復 2023-01-06
  • 1 回答
  • 0 關注
  • 178 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號