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

Java毕设王

已于 2023-11-16 11:49:53 修改

阅读量2.2k

点赞数

文章标签： java 前端 javascript

于 2023-06-13 10:39:15 首次发布

本文链接：https://blog.csdn.net/pleaseprintf/article/details/131183264

版权

文章介绍了如何使用JavaScript和CSS的rgba()函数来创建具有随机颜色和透明度的动态气泡效果。通过p5.js库，作者展示了如何在类中生成随机的红色和透明度值，并将其应用于气泡的填充颜色，从而实现气泡的动画展示。

摘要由CSDN通过智能技术生成

系列文章目录

前言

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站，这篇文章男女通用，看懂了就去分享给你的码吧。
在这里插入图片描述

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() 函数用于设置背景颜色、文字颜色和边框颜色。可以根据需要自由调整每个颜色分量的值和透明度，以创建所需的颜色效果。

Java毕设王

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫