在 Canvas 标记内创建文本图像答案

【问题标题】：Creating Text Images inside of Canvas tag在 Canvas 标记内创建文本图像
【发布时间】：2020-06-09 21:26:50
【问题描述】：

我正在寻找创建一个文本图像（图像中的多个字符组成一个单词），例如具有矩阵影响的画布内的单词“The Matrix”。我遇到的问题是在画布内显示文本，然后具有类似的闪烁或级联效果以形成单词。到目前为止，这是我对画布所做的，没有文本图像。

var c = document.getElementById("c"),
  ctx = c.getContext("2d");
c.height = window.innerHeight, c.width = window.innerWidth;
var matrix = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%+-/~{[|`]}";
matrix = matrix.split("");
for (var font_size = 10, columns = c.width / font_size, drops = [], x = 0; x < columns; x++) drops[x] = 1;

function draw() {
  ctx.fillStyle = "rgba(0, 0, 0, 0.08)", ctx.fillRect(0, 0, c.width, c.height), ctx.fillStyle = "#0f0", ctx.font = font_size + "px courier";
  for (var t = 0; t < drops.length; t++) {
    var i = matrix[Math.floor(Math.random() * matrix.length)];
    ctx.fillText(i, t * font_size, drops[t] * font_size), drops[t] * font_size > c.height && Math.random() > .975 && (drops[t] = 0), drops[t]++
  }
}
setInterval(draw, 15);

<div class="width:50%;height:25vh;background:#000;position:relative;">
  <canvas id="c" style="width:90%;height:75%;position:absolute;z-index:0;"></canvas>
</div>

【问题讨论】：

标签： javascript html css web canvas

【解决方案1】：

我认为我已经找到了解决您问题的可能方法。它记下“矩阵”这个词，但有一个很小的机会（7.5%）会显示另一个字符，这会给它一个闪烁的解密效果。有点喜欢！

您可以使用变量textToWrite 设置要写入的单词，就在函数drawText() 的上方。此函数循环遍历textToWrite 的所有字符并将传递给generateChar 函数。在这里，返回的是相同的字符，或者，很可能会返回一个随机字符。

回到drawText 函数，这个返回的字符被添加到text 变量并写入<canvas>。

随意调整您想要的变量，以提供或多或少的“可闪烁性”。

var c = document.getElementById("c"),
  ctx = c.getContext("2d");
c.height = window.innerHeight, c.width = window.innerWidth;
var matrix = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%+-/~{[|`]}";
matrix = matrix.split("");
for (var font_size = 10, columns = c.width / font_size, drops = [], x = 0; x < columns; x++) drops[x] = 1;

function draw() {
  ctx.fillStyle = "rgba(0, 0, 0, 0.08)", ctx.fillRect(0, 0, c.width, c.height), ctx.fillStyle = "#0f0", ctx.font = font_size + "px courier";
  for (var t = 0; t < drops.length; t++) {
    var i = matrix[Math.floor(Math.random() * matrix.length)];
    ctx.fillText(i, t * font_size, drops[t] * font_size), drops[t] * font_size > c.height && Math.random() > .975 && (drops[t] = 0), drops[t]++
  }
}

let textToWrite = "The Matrix";

function drawText() {
  let textArr = textToWrite.split("");
  var text = '';
  for (var i = 0; i < textToWrite.length; i++) {
    text += generateChar(textArr[i]);
  }

  ctx.font = "60px courier";
  ctx.fillStyle = "#0f0";
  ctx.textAlign = "center";
  ctx.fillText(text, c.width / 2, c.height / 2);
}

function generateChar(char, pos) {
  if (Math.random() > 0.075) {
    return char;
  } else {
    return matrix[(Math.floor(Math.random() * matrix.length))];
  }
}
setInterval(draw, 15);
setInterval(drawText, 30);

<div class="width:50%;height:25vh;background:#000;position:relative;">
  <canvas id="c" style="width:90%;height:75%;position:absolute;z-index:0;"></canvas>
</div>

希望这会有所帮助！如果没有，请发表评论。

【讨论】：