將文本放置在草圖的頂部p5.js

我嘗試使用p5.js庫創建我的第一個網站，最終目標是在線數字組合。我目前正在一個啓動畫面上工作，在這個畫面中，我有一些大標題文本填充屏幕中心，在一個簡單的黑色背景上，主動調整大小以填滿窗口。將文本放置在草圖的頂部p5.js

我想在背景中添加一個簡單的塗鴉，以增加一些興趣。我的挑戰是我不喜歡這個塗鴉畫在我的文字上，而是將它放在我的文字下。起初，我正在考慮無限重繪文字，以便它保持在最上面，但是我推斷，在仍然爲它下面的東西製作動畫時，沒有辦法做到這一點。

我對HTML/CSS的知識很少，但是我正在考慮使標題草圖的背景透明，與塗鴉分開繪製草圖，並使用CSS中的z索引屬性將塗鴉放置在標題下方，這甚至有可能嗎？

謝謝！根據建議

進一步編輯：

function preload() { 
    myFont = loadFont('assets/HighTide.otf'); 
} 

function setup() { 
    canvas = createCanvas(window.innerWidth, window.innerHeight); 
    title = text("Welcome", width/2, height/2); 
    background(30); 
    fsize = window.innerHeight/4; 
    pg = createGraphics(window.innerWidth, window.innerHeight); 
} 

function draw() { 
    background(30); 

    pg.fill(random(0,255), random(0,255), random(0,255)); 
    //pg.translate(width/2, height/2); 
    pg.ellipse(random(window.innerWidth), random(window.innerHeight), 60, 60) 

    image(pg, 0, 0); 

    textFont(myFont); 
    textSize(fsize); 
    textAlign(CENTER); 
    fill(255); 
    text("Welcome", width/2, height/2); 
    } 

window.onresize = function() { 
    var w = window.innerWidth; 
    var h = window.innerHeight; 
    canvas.size(w,h); 
    fsize = window.innerHeight/4; 
    title.textSize(fsize); 
    width = w; 
    height = h; 
}

來源

2017-01-02 Arkadelic

HTML/CSS有一個'position'屬性，我認爲是你想要的。結合您提到的'z-index'，您可以將元素放在另一個元素的頂部並獲得您要查找的效果。 https://css-tricks.com/absolute-positioning-inside-relative-positioning/ – willoller

這取決於你究竟是如何繪製的一切，但如果你正在做的這一切P5.js那麼你已經說明你需要什麼去做。

第1步：每幀，通過調用background()函數清除舊幀。

第2步：然後畫你的塗鴉。

第3步：最後，畫出你的文字。由於您在塗鴉之後繪製了文字，因此它會顯示在塗鴉的「頂部」。

這是大多數P5.js草圖的工作原理：每一幀，您清除舊幀，然後繪製下一幀。

編輯：如果您需要一個不會清除舊框架但仍顯示兩個不同圖層（您的塗鴉和文字）的草圖，那麼您可以將您的塗鴉繪製到緩衝區，然後繪製緩衝每個幀，然後在緩衝區頂部繪製文本。檢查the reference中的createGraphics()函數。

來源

2017-01-02 23:11:39

從理論上講，這應該是有效的，但是我的「塗鴉」是漸進式的，它建立在它本身之上，所以每次都清楚一切，不一定能達到我所期待的。我將編輯我的問題，包括我的上述嘗試^ – Arkadelic

@Arkadelic請參閱編輯我的答案。 –

上面的進一步編輯，一切正常，我將如何去響應我的背景和文本的相同方式響應地調整我的PG Graphics元素的大小？ – Arkadelic

將文本放置在草圖的頂部p5.js

回答

相關問題