Question

我需要一些帮助。我在p5制作了动画。我想将该动画用作网页的背景。所以一切正常，但有一点。当网页上的内容太多（文本，图像......）时，p5画布会滚动内容，因为它没有定位：已修复。所以我试着在CSS文件中使用'position：fixed'，但它没有帮助。有人能帮助我吗？

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

Answer 1

使用以下内容尝试...

canvas {
   position: fixed !important;
}

详细了解 !important 例外here。

使用p5画布作为固定背景

1 个答案: