rgba()中使用变量作为参数

青旅半醒 2023-10-12 09:49 33阅读 0赞

## 系列文章目录 ##

--------------------

#### 文章目录 ####

*  系列文章目录
 *  前言
 *  一、源代码演示
 *  二、解决方法
 *   *  1.HTML方面代码
     *  2.CSS方面代码
     *  3.JavascriptS方面代码
 *  总结

--------------------

## 前言 ##

--------------------

rgba() 函数是 CSS 中的一个颜色函数，它用于定义颜色值。rgba 代表 “red, green, blue, alpha”，即红、绿、蓝和透明度。这个函数接受四个参数，分别表示红色、绿色、蓝色和透明度的值。每个颜色值的范围是 0 到 255，而透明度的范围是 0 到 1。

使用 rgba() 函数时，可以为元素设置半透明的背景颜色、边框颜色等。这在设计中非常有用，因为它允许您创建具有不同透明度的颜色效果。

下面是一个使用 rgba() 函数的 CSS 示例：

div {
        
      background-color: rgba(255, 0, 0, 0.5); /* 半透明红色背景 */
      border: 1px solid rgba(0, 0, 255, 0.8); /* 半透明蓝色边框 */
    }

在这个示例中，div 元素的背景颜色设置为半透明的红色（红色值为 255，透明度为 0.5），边框设置为半透明的蓝色（蓝色值为 255，透明度为 0.8）

## 一、源代码演示 ##

var radius = random(20,200);
        var randRed = random(210,255);
        var randAlpha = random(0.25,0.4);
        var Color = 'rgba(255,255,255,0.25)';
        this.x = random(100, 700);
        this.y = random(100, 500);
        this.width = radius;
        this.height = radius;
        this.color = Color;
        this.velocityX = random(-5, +5);
        this.velocityY= random(-5, +5);

对于上下文，这将在类Bubble的构造函数中使用，以创建随机的圆形气泡。我找到了一种随机化半径和位置的方法，但是有没有办法使用randRed和randAlpha作为Color变量中rgba()的红色和Alpha值呢？

我希望能够做这样的事情

var Color = 'rgba(randRed,255,255,randAlpha);

## 二、解决方法 ##

### 1.HTML方面代码 ###

<!DOCTYPE html>
    <html>
    
    <head>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.sound.min.js"></script>
      <link rel="stylesheet" type="text/css" href="style.css">
      <meta charset="utf-8" />
    </head>
    
    <body>
      <script src="sketch.js"></script>
    </body>
    
    </html>

### 2.CSS方面代码 ###

代码如下（示例）：

html,
    body {
        
      margin: 0;
      padding: 0;
    }
    
    canvas {
        
      display: block;
    }

### 3.JavascriptS方面代码 ###

代码如下（示例）：

class Bubble {
        
    
      constructor() {
        
        var allInstances = [];
    
        var radius = random(20, 200);
        var randRed = random(210, 255);
        var randAlpha = random(0.25, 0.4);
        var Color = 'rgba(255,255,255,0.25)';
        this.x = random(100, 700);
        this.y = random(100, 500);
        this.width = radius;
        this.height = radius;
        this.color = Color;
        this.velocityX = random(-5, +5);
        this.velocityY = random(-5, +5);
    
        this.display = function() {
        
          stroke(255);
          fill(this.color);
          ellipse(this.x, this.y, this.width, this.height);
        }
    
        this.move = function() {
        
          this.x = this.x + this.velocityX;
          this.y = this.y + this.velocityY;
        }
    
      }
    }
    
    var bubbles = [];
    
    function setup() {
        
      createCanvas(800, 600);
      bubble1 = new Bubble();
      bubble2 = new Bubble();
      bubble3 = new Bubble();
      bubble4 = new Bubble();
      bubble5 = new Bubble();
      bubble6 = new Bubble();
    }
    
    
    function draw() {
        
      background(56, 226, 232);
      bubble1.move();
      bubble2.move();
      bubble3.move();
      bubble4.move();
      bubble5.move();
      bubble6.move();
    
      bubble1.display();
      bubble2.display();
      bubble3.display();
      bubble4.display();
      bubble5.display();
      bubble6.display();
    }
    
    setInterval(function() {
        
      setup();
      draw();
    }, 2900);

## 总结 ##

在 rgba() 函数中使用变量作为参数可以让我们更灵活地控制颜色。我们可以在 CSS 中定义变量，并在需要时轻松地更改它们，从而实现更好的可维护性和可扩展性