Question

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

  <table>
    <tr *ngFor="let tag of tags">
      <th *ngIf="tag.id == tagged.id">{{ tag.id }}</th>
      <th *ngIf="tag.id == tagged.id">{{ tag.manufacturer }}</th>
      <th *ngIf="tag.id == tagged.id">{{ tag.serial }}</th>
      <th *ngIf="tag.id == tagged.id">{{ tag.inspectedDate }}</th>
      <th *ngIf="tag.id == tagged.id">{{ tag.result }}</th>
      <th *ngIf="tag.id == tagged.id">{{ tag.actionNeeded }}</th>
      <th *ngIf="tag.id == tagged.id">{{ tag.inspectee }}</th>
      <th *ngIf="tag.id == tagged.id">{{ tag.certificateNumb }}</th>
      <th *ngIf="tag.id == tagged.id">{{ tag.nextInspection }}</th>
    </tr>
  </table>

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

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

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

在Canvas标签内创建文本图像

1 个答案: