Previous
Next

5. 设置

5.1. 背景色


background()

示例：

▶️运行示例代码



function setup(){
  createCanvas(100,100);
  colorMode(RGB);
};

function draw(){
  background('#ff0000');
  noStroke();
  fill([0, 100, 0, 80]);
  ellipse(50,50,50,50);
};

舞台区显示的画布内容如下：

Description

The background() function sets the color used for the background of the p5.js canvas. The default background is transparent. This function is typically used within draw() to clear the display window at the beginning of each frame, but it can be used inside setup() to set the background on the first frame of animation or if the background need only be set once.

The color is either specified in terms of the RGB, HSB, or HSL color depending on the current colorMode. (The default color space is RGB, with each value in the range from 0 to 255). The alpha range by default is also 0 to 255.

If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used.

A p5.Color object can also be provided to set the background color.

A p5.Image can also be provided to set the background image.

Syntax

background(color)
background(colorstring, [a])
background(gray, [a])
background(v1, v2, v3, [a])
background(values)
background(image, [a])

Parameters

  • color
     
    p5.Color: 

    any value created by the color() function

  • colorstring
     
    String: 

    color string, possible formats include: integer rgb() or rgba(), percentage rgb() or rgba(), 3-digit hex, 6-digit hex

  • a
     
    Number: 

    opacity of the background relative to current color range (default is 0-255)

     (Optional)
  • gray
     
    Number: 

    specifies a value between white and black

  • v1
     
    Number: 

    red or hue value (depending on the current color mode)

  • v2
     
    Number: 

    green or saturation value (depending on the current color mode)

  • v3
     
    Number: 

    blue or brightness value (depending on the current color mode)

  • values
     
    Number[]: 

    an array containing the red, green, blue and alpha components of the color

  • image
     
    p5.Image: 

    image created with loadImage() or createImage(), to set as background (must be same size as the sketch window)





Tags:
Previous
Next