Background Image / 背景画像

この例は、背景画像を読み込む最速の方法を示しています。画像を背景として読み込むには、プログラムと同じ幅と高さである必要があります。

background image
Image

View Source Code

/*
 * @name Background Image
 * @arialabel An astronaut on a planet with a horizontal yellow line traveling from the top to the bottom of the image
 * @description This example presents the fastest way to load a
 * background image. To load an image as the background,
 * it must be the same width and height as the program.
 * <p><em><span class="small"> To run this example locally, you will need an
 * image file, and a running <a href="https://github.com/processing/p5.js/wiki/Local-server">
 * local server</a>.</span></em></p>
 */
let bg;
let y = 0;

function setup() {
  // The background image must be the same size as the parameters
  // into the createCanvas() method. In this program, the size of
  // the image is 720x400 pixels.
  // bg = loadImage('assets/moonwalk.jpg');
  bg = loadImage('../../../../p5js-website-legacy-examples/assets/moonwalk.jpg');
  // createCanvas(720, 400);
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(bg);

  stroke(226, 204, 0);
  line(0, y, width, y);

  y++;
  if (y > height) {
    y = 0;
  }
}

License

Source code is available on GitHub p5.js website legacy.

All examples are licensed under CC BY-NC-SA 4.0.