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

落日映苍穹つ 2023-10-12 14:54 8阅读 0赞

## 系列文章目录 ##

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

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

*  系列文章目录
 *  前言
 *  一、这是我的Javascript代码
 *  二、使用步骤
 *   *  1.引入库
     *  2.解决
 *  总结

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

## 前言 ##

`rgba()`是一种CSS颜色函数，用于设置颜色的红、绿、蓝和透明度值。它由四个参数组成，分别是红色（R）、绿色（G）、蓝色（B）和透明度（A），取值范围都是0-255，透明度的取值范围是0-1。其中，前三个参数是必需的，表示颜色的RGB值，最后一个参数是可选的，表示透明度。

`rgba()`函数可以用于设置元素的背景颜色、文本颜色、边框颜色等等。例如，设置一个半透明的红色背景颜色可以使用以下代码：

background-color: rgba(255, 0, 0, 0.5);

这将设置一个红色背景，透明度为50%。在这个例子中，红色的RGB值是255,0,0，透明度为0.5。

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

## 一、这是我的Javascript代码 ##

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);

这个是可能的吗？下面是代码的其余部分：

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);

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

<!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>

## 二、使用步骤 ##

### 1.引入库 ###

### 2.解决 ###

尝试模板文字：

let randRed = parseInt(random(210, 255));
    let randAlpha = random(0.25, 0.40).toFixed(2);
    let color = `rgba(${
          randRed}, 255, 255, ${
          randAlpha})`;

praseInt(x)解析x并返回一个整数。例如：

let num = '210.23';
    let res = parseInt(num); // res will be equal to 210

y.toFixed(x)将数字y四舍五入为x位小数。例如：

let num = 0.288682;
    let res = num.toFixed(2); // res will be equal to 0.29

注意:您可以调用toFixed()将num四舍五入到小数点后零位。也就是说，你也可以为randRed调用toFixed()。

## 总结 ##

rgba() 是一种用于定义颜色的 CSS 函数。它代表红色、绿色、蓝色和透明度（Alpha）的值。这个函数可以用来创建一个包含 RGBA 值的颜色。

RGBA 代表红色（Red）、绿色（Green）、蓝色（Blue）和透明度（Alpha），每个颜色分量的取值范围是从 0 到 255，透明度的取值范围是从 0 到 1。

rgba() 函数的语法如下：

rgba(red, green, blue, alpha)
    red：表示红色分量的整数值或百分比值。
    green：表示绿色分量的整数值或百分比值。
    blue：表示蓝色分量的整数值或百分比值。
    alpha：表示透明度的值，取值范围从 0 到 1，其中 0 表示完全透明，1 表示完全不透明。

以下是一些示例：

background-color: rgba(255, 0, 0, 0.5); /* 红色，半透明 */
    color: rgba(0, 128, 0, 0.8); /* 绿色，较高透明度 */
    border: 1px solid rgba(0, 0, 255, 1); /* 蓝色，完全不透明 */

在这些示例中，rgba() 函数用于设置背景颜色、文字颜色和边框颜色。可以根据需要自由调整每个颜色分量的值和透明度，以创建所需的颜色效果。