html 动画标题图像。使用p5.js库。

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 动画标题图像。使用p5.js库。相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8/>

<link href='https://fonts.googleapis.com/css?family=Allerta+Stencil' rel='stylesheet' type='text/css'>
<script src="/libraries/p5.js"></script>
<script src="/libraries/p5.dom.js"></script>

<script>

var text;
var canvas;
i = 30;

function setup() {
  text = createDiv("indiessance");
  canvas = createCanvas(960, 150);
  background(0);
  text.position(i, 10);
  text.style("font-family", "Allerta Stencil");
  text.style("background-color", "#000000");
  text.style("color", "#ffffff");
  text.style("font-size", "72pt");
}

function draw() {
background(0);
  text.position(i, 10);
  text.style("color", "#ffffff");
  i = i + random(350);
  if (i > 350) {
    i = 30;
  }
  frameRate(1);
}

</script>

</head><body> </body></html>

以上是关于html 动画标题图像。使用p5.js库。的主要内容，如果未能解决你的问题，请参考以下文章

从0到1教你如何使用 p5.js 绘制简单的动画

html P5 HTML。使用p5.js库。

html 有丝分裂模拟。使用p5.js库。

html id类风格。使用p5.js库。

使用p5.js制作极简人物动画

如何在 p5.js 中裁剪图像而不在屏幕上绘制图像