使用p5畫布作爲固定背景

我需要一些幫助。我在p5中製作了一個動畫。我想將該動畫用作網頁的背景。所以一切正常，但一件事。當網頁上的內容太多（文本，圖像...）時，p5畫布會隨內容一起滾動，因爲它未定位：固定。所以我嘗試在CSS文件中使用'position：fixed'，但它沒有幫助。有誰能夠幫助我？使用p5畫布作爲固定背景

HTML：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="UTF-8"> 
    <title>Template</title> 
    <script src="libraries/p5.js" type="text/javascript"></script> 

    <script src="libraries/p5.dom.js" type="text/javascript"></script> 
    <script src="libraries/p5.sound.js" type="text/javascript"></script> 

    <script src="sketch.js" type="text/javascript"></script> 
    <link rel="stylesheet" href="style.css"> 
    </head> 
    <body> 
    <section> 
     <br><br><br><br><br><br><br> 
     <br><br><br><br><br><br><br> 
     <br><br><br><br><br><br><br> 
     <br><br><br><br><br><br><br> 
     <br><br><br><br><br><br><br> 
     <br><br><br><br><br><br><br> 
     <br><br><br><br><br><br><br> 
     <br><br><br><br><br><br><br> 
     <br><br><br><br><br><br><br> 
     <br><br><br><br><br><br><br> 
    </section> 
    </body> 
</html>

P5的Javascript：

var canvas; 
var backgroundimage; 

var type1_Rect = []; 
var type1_Rect_amount = screen.width * 0.2; 
var type1_Rect_speed = 1; 
var type1_Rect_size = 1; 


var type2_Rect = []; 
var type2_Rect_amount = screen.width * 0.1; 
var type2_Rect_speed = 0.7; 
var type2_Rect_size = 2; 
var j = 0; 


var i = 0; 
function windowResized(){ 
    resizeCanvas(window.innerWidth, window.innerHeight); 
} 
function setup() { 
    backgroundimage = loadImage("wallpaper/galaxy.jpg");   //The Backgroundimage 

    canvas = createCanvas(window.innerWidth, window.innerHeight); 
    canvas.position(0, 0); 
    canvas.style('z-index', '-10'); 

    for(i = 0; i < type1_Rect_amount; i++){ 
    type1_Rect[i] = { 
     x: random(0, screen.width), 
     y: random(0, screen.height), 

     display: function(){ 
     fill(255); 
     noStroke(); 
     rect(this.x, this.y, type1_Rect_size, type1_Rect_size); 
     }, 

     move: function(){ 
     this.y = this.y - type1_Rect_speed; 

     if(type1_Rect[i].y <= 0){ 
     type1_Rect[i].y = window.innerHeight; 
     } 
     } 
    } 
    } 
    i = 0; 


    for(j = 0; j < type2_Rect_amount; j++){ 
    type2_Rect[j] = { 
     x: random(0, screen.width), 
     y: random(0, screen.height), 

     display: function(){ 
     fill(255); 
     noStroke(); 
     rect(this.x, this.y, type2_Rect_size, type2_Rect_size); 
     }, 

     move: function(){ 
     this.y = this.y - type2_Rect_speed; 

     if(type2_Rect[j].y <= 0){ 
     type2_Rect[j].y = window.innerHeight; 
     } 
     } 
    } 
    } 
    j = 0; 
    //--------------------------------------- 
} 

function draw() { 
    image(backgroundimage);  //Backgroundimage 


    fill(255); 
    //text(screen.width, 50, 50); 
    //text(type1_Rect_amount, 50, 70); 
    //text(type2_Rect_amount, 50, 90); 


    while(i < type1_Rect_amount){ 
    type1_Rect[i].display(); 
    type1_Rect[i].move(); 

    i++; 
    } 
    i = 0; 





    while(j < type2_Rect_amount){ 
    type2_Rect[j].display(); 
    type2_Rect[j].move(); 

    j++; 
    } 
    j = 0; 

}

the result

來源

2017-07-03 DominikN

嘗試使用以下...

canvas { 
    position: fixed !important; 
}

瞭解更多關於!important例外here。

來源

2017-07-03 16:47:01

我工作過。非常感謝你！：D – DominikN

我點了按鈕。我很感激：D – DominikN

使用p5畫布作爲固定背景

回答

相關問題