如何在p5Js中使用drawingContext对文本应用发光效果？

Question

我在 p5js 中有以下示例。我修改了

drawingContext

，使其在文本上产生发光效果。这是一个工作示例：

问题是我必须多次执行

glow() function

，即应用

drawingContext.shadowBlur

和

drawingContext.shadowColor

以及一遍又一遍地执行

text()

才能产生这种发光效果。

在

glow()

函数中，我想执行

text()

一次。这种方法是否有替代方法，可以应用多层模糊 abd 阴影以及创建发光效果所需的任何其他内容？

let thisColor;

function setup() {
  let canvas = createCanvas(700, 200);
  canvas.parent('canvas-container');

  // Get Form Information
  textAlign(CENTER, CENTER);
  fill(color(255,255,255));
  textStyle(BOLD);
  textSize(60);
  
  thisColor = color(255, 249, 124);
}

function draw(){
  background(0);
  stroke(thisColor);
  neonText("Happy Birthday", thisColor, 200);
  neonText("Happy Birthday", thisColor, 100);
  neonText("Happy Birthday", thisColor, 50);
  neonText("Happy Birthday", thisColor, 25);
  neonText("Happy Birthday", thisColor, 10);
}

function neonText(thisText, color, blurLevel){
  drawingContext.shadowBlur = blurLevel;
  drawingContext.shadowColor = color;
  text("Happy Birthday", width/2, height/2);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
<style>
    #canvas-container {
        display: flex;
        justify-content: center;
    }
</style>

<div id="canvas-container" class="container mt-3">
  <!-- Canvas will be placed here -->
</div>

Answer 1

您可以使用

setInterval

制作动画并在两种状态之间交替：

let thisColor;

function setup() {
  let canvas = createCanvas(700, 200);
  canvas.parent('canvas-container');

  // Get Form Information
  textAlign(CENTER, CENTER);
  fill(color(255,255,255));
  textStyle(BOLD);
  textSize(60);
  
  thisColor = color(255, 249, 124);
}

function draw(){
  background(0);
  stroke(thisColor);
  neonText("Happy Birthday", thisColor, 200);
  neonText("Happy Birthday", thisColor, 100);
  neonText("Happy Birthday", thisColor, 50);
  neonText("Happy Birthday", thisColor, 25);
  neonText("Happy Birthday", thisColor, 10);
}

function neonText(thisText, color, blurLevel){
  drawingContext.shadowBlur = blurLevel;
  drawingContext.shadowColor = color;
  text("Happy Birthday", width/2, height/2);
}

setInterval(function() {
    thisColor = (thisColor === "black") ? color(255, 249, 124) : "black";
    draw();
}, 1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
<style>
    #canvas-container {
        display: flex;
        justify-content: center;
    }
</style>

<div id="canvas-container" class="container mt-3">
  <!-- Canvas will be placed here -->
</div>