如何更改 Javascript 对象的不透明度

您可以通过使用 RGBA 更改上下文 alpha 通道来实现此目的（请参阅最底部ctx.fillStyle = 'rgba(0, 0, 255, 0.5)' // NEW!，其中 0.5 是不透明度级别 - 请参阅）：;(function() {  'use strict'  var lava0  var ge1doot = {    screen: {      elem: null,      callback: null,      ctx: null,      width: 0,      height: 0,      left: 0,      top: 0,      init: function(id, callback, initRes) {        this.elem = document.getElementById(id)        this.callback = callback || null        if (this.elem.tagName == 'CANVAS') this.ctx = this.elem.getContext('2d')        window.addEventListener(          'resize',          function() {            this.resize()          }.bind(this),          false        )        this.elem.onselectstart = function() {          return false        }        this.elem.ondrag = function() {          return false        }        initRes && this.resize()        return this      },      resize: function() {        var o = this.elem        this.width = o.offsetWidth        this.height = o.offsetHeight        for (this.left = 0, this.top = 0; o != null; o = o.offsetParent) {          this.left += o.offsetLeft          this.top += o.offsetTop        }        if (this.ctx) {          this.elem.width = this.width          this.elem.height = this.height        }        this.callback && this.callback()      },    },  }  // Point constructor  var Point = function(x, y) {    this.x = x    this.y = y    this.magnitude = x * x + y * y    this.computed = 0    this.force = 0  }  Point.prototype.add = function(p) {    return new Point(this.x + p.x, this.y + p.y)  }  // Ball constructor  var Ball = function(parent) {    var min = 0.1    var max = 1.5    this.vel = new Point(      (Math.random() > 0.5 ? 1 : -1) * (0.2 + Math.random() * 0.25),      (Math.random() > 0.5 ? 1 : -1) * (0.2 + Math.random())    )    this.pos = new Point(      parent.width * 0.2 + Math.random() * parent.width * 0.6,      parent.height * 0.2 + Math.random() * parent.height * 0.6    )    this.size = parent.wh / 15 + (Math.random() * (max - min) + min) * (parent.wh / 15)    this.width = parent.width    this.height = parent.height  }  // move balls  Ball.prototype.move = function() {    // bounce borders    if (this.pos.x >= this.width - this.size) {      if (this.vel.x > 0) this.vel.x = -this.vel.x      this.pos.x = this.width - this.size    } else if (this.pos.x <= this.size) {      if (this.vel.x < 0) this.vel.x = -this.vel.x      this.pos.x = this.size    }    if (this.pos.y >= this.height - this.size) {      if (this.vel.y > 0) this.vel.y = -this.vel.y      this.pos.y = this.height - this.size    } else if (this.pos.y <= this.size) {      if (this.vel.y < 0) this.vel.y = -this.vel.y      this.pos.y = this.size    }    // velocity    this.pos = this.pos.add(this.vel)  }  // lavalamp constructor  var LavaLamp = function(width, height, numBalls, c0, c1) {    this.step = 5    this.width = width    this.height = height    this.wh = Math.min(width, height)    this.sx = Math.floor(this.width / this.step)    this.sy = Math.floor(this.height / this.step)    this.paint = false    this.metaFill = createRadialGradient(width, height, width, c0, c1)    this.plx = [0, 0, 1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 0, 0, 0, 0]    this.ply = [0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 1, 1, 0, 1, 0, 1]    this.mscases = [0, 3, 0, 3, 1, 3, 0, 3, 2, 2, 0, 2, 1, 1, 0]    this.ix = [1, 0, -1, 0, 0, 1, 0, -1, -1, 0, 1, 0, 0, 1, 1, 0, 0, 0, 1, 1]    this.grid = []    this.balls = []    this.iter = 0    this.sign = 1    // init grid    for (var i = 0; i < (this.sx + 2) * (this.sy + 2); i++) {      this.grid[i] = new Point((i % (this.sx + 2)) * this.step, Math.floor(i / (this.sx + 2)) * this.step)    }    // create metaballs    for (var k = 0; k < numBalls; k++) {      this.balls[k] = new Ball(this)    }  }  // compute cell force  LavaLamp.prototype.computeForce = function(x, y, idx) {    var force    var id = idx || x + y * (this.sx + 2)    if (x === 0 || y === 0 || x === this.sx || y === this.sy) {      force = 0.6 * this.sign    } else {      force = 0      var cell = this.grid[id]      var i = 0      var ball      while ((ball = this.balls[i++])) {        force +=          (ball.size * ball.size) /          (-2 * cell.x * ball.pos.x - 2 * cell.y * ball.pos.y + ball.pos.magnitude + cell.magnitude)      }      force *= this.sign    }    this.grid[id].force = force    return force  }  // compute cell  LavaLamp.prototype.marchingSquares = function(next) {    var x = next[0]    var y = next[1]    var pdir = next[2]    var id = x + y * (this.sx + 2)    if (this.grid[id].computed === this.iter) {      return false    }    var dir,      mscase = 0    // neighbors force    for (var i = 0; i < 4; i++) {      var idn = x + this.ix[i + 12] + (y + this.ix[i + 16]) * (this.sx + 2)      var force = this.grid[idn].force      if ((force > 0 && this.sign < 0) || (force < 0 && this.sign > 0) || !force) {        // compute force if not in buffer        force = this.computeForce(x + this.ix[i + 12], y + this.ix[i + 16], idn)      }      if (Math.abs(force) > 1) mscase += Math.pow(2, i)    }    if (mscase === 15) {      // inside      return [x, y - 1, false]    } else {      // ambiguous cases      if (mscase === 5) dir = pdir === 2 ? 3 : 1      else if (mscase === 10) dir = pdir === 3 ? 0 : 2      else {        // lookup        dir = this.mscases[mscase]        this.grid[id].computed = this.iter      }      // draw line      var ix =        this.step /        (Math.abs(            Math.abs(this.grid[x + this.plx[4 * dir + 2] + (y + this.ply[4 * dir + 2]) * (this.sx + 2)].force) - 1          ) /          Math.abs(            Math.abs(this.grid[x + this.plx[4 * dir + 3] + (y + this.ply[4 * dir + 3]) * (this.sx + 2)].force) - 1          ) +          1)      ctx.lineTo(        this.grid[x + this.plx[4 * dir] + (y + this.ply[4 * dir]) * (this.sx + 2)].x + this.ix[dir] * ix,        this.grid[x + this.plx[4 * dir + 1] + (y + this.ply[4 * dir + 1]) * (this.sx + 2)].y + this.ix[dir + 4] * ix      )      this.paint = true      // next      return [x + this.ix[dir + 4], y + this.ix[dir + 8], dir]    }  }  LavaLamp.prototype.renderMetaballs = function() {    var i = 0,      ball    while ((ball = this.balls[i++])) ball.move()    // reset grid    this.iter++      this.sign = -this.sign    this.paint = false    ctx.fillStyle = this.metaFill    ctx.beginPath()    // compute metaballs    i = 0    //ctx.shadowBlur = 50;    //ctx.shadowColor = "green";    while ((ball = this.balls[i++])) {      // first cell      var next = [Math.round(ball.pos.x / this.step), Math.round(ball.pos.y / this.step), false]      // marching squares      do {        next = this.marchingSquares(next)      } while (next)      // fill and close path      if (this.paint) {        ctx.fill()        ctx.closePath()        ctx.beginPath()        this.paint = false      }    }  }  // gradients  var createRadialGradient = function(w, h, r, c0, c1) {    var gradient = ctx.createRadialGradient(w / 1, h / 1, 0, w / 1, h / 1, r)    gradient.addColorStop(0, c0)    gradient.addColorStop(1, c1)  }  // main loop  var run = function() {    requestAnimationFrame(run)    ctx.clearRect(0, 0, screen.width, screen.height)    ctx.fillStyle = 'rgba(0, 0, 255, 0.5)' // NEW!    lava0.renderMetaballs()  }  // canvas  var screen = ge1doot.screen.init('bubble', null, true),    ctx = screen.ctx  screen.resize()  // create LavaLamps  lava0 = new LavaLamp(screen.width, screen.height, 6, '#FF9298', '#E4008E')  run()})()body {  margin: 0;}.wrap {  overflow: hidden;  position: relative;  height: 100vh;}canvas {  width: 100%;  height: 100%;}<div class="wrap">  <canvas id="bubble"></canvas></div>

您的 Lava 构造函数采用两种颜色，可以修改这些颜色以满足您的颜色需求。通过使用rgba()颜色版本，您可以设置 alpha（即不透明度）或气泡/肉丸。但是，在执行此操作之前，您需要返回gradient创建的颜色createRadialGradient，以便可以使用颜色：var createRadialGradient = function(w, h, r, c0, c1) {  // ... code ...  return gradient; // add this line};现在您可以修改调用构造函数的方式：// rgba versions of your colors -----------------------\/lava0 = new LavaLamp(screen.width, screen.height, 6, "rgba(255, 146, 152, 0.5)", "rgba(228, 0, 142, 0.5)");;(function() {  "use strict";  var lava0;  var ge1doot = {    screen: {      elem:     null,      callback: null,      ctx:      null,      width:    0,      height:   0,      left:     0,      top:      0,      init: function (id, callback, initRes) {        this.elem = document.getElementById(id);        this.callback = callback || null;        if (this.elem.tagName == "CANVAS") this.ctx = this.elem.getContext("2d");        window.addEventListener('resize', function () {          this.resize();        }.bind(this), false);        this.elem.onselectstart = function () { return false; }        this.elem.ondrag        = function () { return false; }        initRes && this.resize();        return this;      },      resize: function () {        var o = this.elem;        this.width  = o.offsetWidth;        this.height = o.offsetHeight;        for (this.left = 0, this.top = 0; o != null; o = o.offsetParent) {          this.left += o.offsetLeft;          this.top  += o.offsetTop;        }        if (this.ctx) {          this.elem.width  = this.width;          this.elem.height = this.height;        }        this.callback && this.callback();      }    }  }  // Point constructor  var Point = function(x, y) {    this.x = x;    this.y = y;    this.magnitude = x * x + y * y;    this.computed = 0;    this.force = 0;  };  Point.prototype.add = function(p) {    return new Point(this.x + p.x, this.y + p.y);  };  // Ball constructor  var Ball = function(parent) {    var min = .1;    var max = 1.5;    this.vel = new Point(      (Math.random() > 0.5 ? 1 : -1) * (0.2 + Math.random() * 0.25), (Math.random() > 0.5 ? 1 : -1) * (0.2 + Math.random())    );    this.pos = new Point(      parent.width * 0.2 + Math.random() * parent.width * 0.6,      parent.height * 0.2 + Math.random() * parent.height * 0.6    );    this.size = (parent.wh / 15) + ( Math.random() * (max - min) + min ) * (parent.wh / 15);    this.width = parent.width;    this.height = parent.height;  };  // move balls  Ball.prototype.move = function() {    // bounce borders    if (this.pos.x >= this.width - this.size) {      if (this.vel.x > 0) this.vel.x = -this.vel.x;      this.pos.x = this.width - this.size;    } else if (this.pos.x <= this.size) {      if (this.vel.x < 0) this.vel.x = -this.vel.x;      this.pos.x = this.size;    }    if (this.pos.y >= this.height - this.size) {      if (this.vel.y > 0) this.vel.y = -this.vel.y;      this.pos.y = this.height - this.size;    } else if (this.pos.y <= this.size) {      if (this.vel.y < 0) this.vel.y = -this.vel.y;      this.pos.y = this.size;    }    // velocity    this.pos = this.pos.add(this.vel);  };  // lavalamp constructor  var LavaLamp = function(width, height, numBalls, c0, c1) {    this.step = 5;    this.width = width;    this.height = height;    this.wh = Math.min(width, height);    this.sx = Math.floor(this.width / this.step);    this.sy = Math.floor(this.height / this.step);    this.paint = false;    this.metaFill = createRadialGradient(width, height, width, c0, c1);    this.plx = [0, 0, 1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 0, 0, 0, 0];    this.ply = [0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 1, 1, 0, 1, 0, 1];    this.mscases = [0, 3, 0, 3, 1, 3, 0, 3, 2, 2, 0, 2, 1, 1, 0];    this.ix = [1, 0, -1, 0, 0, 1, 0, -1, -1, 0, 1, 0, 0, 1, 1, 0, 0, 0, 1, 1];    this.grid = [];    this.balls = [];    this.iter = 0;    this.sign = 1;    // init grid    for (var i = 0; i < (this.sx + 2) * (this.sy + 2); i++) {      this.grid[i] = new Point(        (i % (this.sx + 2)) * this.step, (Math.floor(i / (this.sx + 2))) * this.step      )    }    // create metaballs    for (var k = 0; k < numBalls; k++) {      this.balls[k] = new Ball(this);    }  };  // compute cell force  LavaLamp.prototype.computeForce = function(x, y, idx) {    var force;    var id = idx || x + y * (this.sx + 2);    if (x === 0 || y === 0 || x === this.sx || y === this.sy) {      force = 0.6 * this.sign;    } else {      force = 0;      var cell = this.grid[id];      var i = 0;      var ball;      while (ball = this.balls[i++]) {        force += ball.size * ball.size / (-2 * cell.x * ball.pos.x - 2 * cell.y * ball.pos.y + ball.pos.magnitude + cell.magnitude);      }      force *= this.sign    }    this.grid[id].force = force;    return force;  };  // compute cell  LavaLamp.prototype.marchingSquares = function(next) {    var x = next[0];    var y = next[1];    var pdir = next[2];    var id = x + y * (this.sx + 2);    if (this.grid[id].computed === this.iter) {      return false;    }    var dir, mscase = 0;    // neighbors force    for (var i = 0; i < 4; i++) {      var idn = (x + this.ix[i + 12]) + (y + this.ix[i + 16]) * (this.sx + 2);      var force = this.grid[idn].force;      if ((force > 0 && this.sign < 0) || (force < 0 && this.sign > 0) || !force) {        // compute force if not in buffer        force = this.computeForce(          x + this.ix[i + 12],          y + this.ix[i + 16],          idn        );      }      if (Math.abs(force) > 1) mscase += Math.pow(2, i);    }    if (mscase === 15) {      // inside      return [x, y - 1, false];    } else {      // ambiguous cases      if (mscase === 5) dir = (pdir === 2) ? 3 : 1;      else if (mscase === 10) dir = (pdir === 3) ? 0 : 2;      else {        // lookup        dir = this.mscases[mscase];        this.grid[id].computed = this.iter;      }      // draw line      var ix = this.step / (          Math.abs(Math.abs(this.grid[(x + this.plx[4 * dir + 2]) + (y + this.ply[4 * dir + 2]) * (this.sx + 2)].force) - 1) /          Math.abs(Math.abs(this.grid[(x + this.plx[4 * dir + 3]) + (y + this.ply[4 * dir + 3]) * (this.sx + 2)].force) - 1) + 1        );      ctx.lineTo(        this.grid[(x + this.plx[4 * dir]) + (y + this.ply[4 * dir]) * (this.sx + 2)].x + this.ix[dir] * ix,        this.grid[(x + this.plx[4 * dir + 1]) + (y + this.ply[4 * dir + 1]) * (this.sx + 2)].y + this.ix[dir + 4] * ix      );      this.paint = true;      // next      return [        x + this.ix[dir + 4],        y + this.ix[dir + 8],        dir      ];    }  };  LavaLamp.prototype.renderMetaballs = function() {    var i = 0, ball;    while (ball = this.balls[i++]) ball.move();    // reset grid    this.iter++;    this.sign = -this.sign;    this.paint = false;    ctx.fillStyle = this.metaFill;    ctx.beginPath();    // compute metaballs    i = 0;    //ctx.shadowBlur = 50;    //ctx.shadowColor = "green";    while (ball = this.balls[i++]) {      // first cell      var next = [        Math.round(ball.pos.x / this.step),        Math.round(ball.pos.y / this.step), false      ];      // marching squares      do {        next = this.marchingSquares(next);      } while (next);      // fill and close path      if (this.paint) {        ctx.fill();        ctx.closePath();        ctx.beginPath();        this.paint = false;      }    }  };  // gradients  var createRadialGradient = function(w, h, r, c0, c1) {    var gradient = ctx.createRadialGradient(      w / 1, h / 1, 0,      w / 1, h / 1, r    );    gradient.addColorStop(0, c0);    gradient.addColorStop(1, c1);    return gradient;  };  // main loop  var run = function() {    requestAnimationFrame(run);    ctx.clearRect(0, 0, screen.width, screen.height);    lava0.renderMetaballs();  };  // canvas  var screen = ge1doot.screen.init("bubble", null, true),      ctx = screen.ctx;  screen.resize();  // create LavaLamps  lava0 = new LavaLamp(screen.width, screen.height, 6, "rgba(255, 146, 152, 0.5)", "rgba(228, 0, 142, 0.5)");  run();})();body {  margin: 0;}.wrap {  overflow: hidden;  position: relative;  height: 100vh;}canvas {  width: 100%;  height: 100%;}<div class="wrap">  <canvas id="bubble"></canvas></div>

如何更改 Javascript 对象的不透明度

2回答