VUE | 好看的 404 页面

最新推荐文章于 2024-06-03 13:49:46 发布

@许卿

最新推荐文章于 2024-06-03 13:49:46 发布

阅读量1.9k

点赞数 3

分类专栏： Vue 文章标签： HTML5 Canvas 动画效果立体文字 JavaScript

本文链接：https://blog.csdn.net/qq_41980405/article/details/120301004

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、立体文字

1.页面效果

在这里插入图片描述

2.页面代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>页面不翼而飞！</title>

<style>
html,body {
	margin:0;
	padding:0;
}
canvas {
	display:block;
}
</style>
</head>
<body>

<div></div>

<script>
var canvas = document.createElement('canvas');
      var height = canvas.height = window.innerHeight;
      var width = canvas.width = window.innerWidth;
      var ctx = canvas.getContext('2d');
      document.body.appendChild(canvas);

      function random(min,max)
      {
          return Math.random()*(max-min+1)+min;
      }

      function range_map(value,in_min, in_max, out_min, out_max) {
        return (value - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
      }

      var word_arr = [];
      var txt_min_size = 5;
      var txt_max_size = 25;
      var keypress = false;
      var acclerate = 2;
      for (var i = 0; i < 25; i++) {
        word_arr.push({
          x : random(0,width),
          y : random(0,height),
          text : '请联系管理员！',
          size : random(txt_min_size,txt_max_size)
        });

        word_arr.push({
          x : random(0,width),
          y : random(0,height),
          text : '页面被氧化了！',
          size : random(txt_min_size,txt_max_size)
        });


        word_arr.push({
          x : random(0,width),
          y : random(0,height),
          text : '页面被氧化了！',
          size : random(txt_min_size,txt_max_size)
        });

        word_arr.push({
          x : random(0,width),
          y : random(0,height),
          text : '哇哦！404！',
          size : Math.floor(random(txt_min_size,txt_max_size))
        });
      }

      function render()
      {
        ctx.fillStyle = "rgba(0,0,0,1)";
        ctx.fillRect(0,0,width,height);

        ctx.fillStyle = "#fff";
        for (var i = 0; i < word_arr.length; i++) {
          ctx.font = word_arr[i].size+"px sans-serif";
          var w = ctx.measureText(word_arr[i].text);
          ctx.fillText(word_arr[i].text,word_arr[i].x,word_arr[i].y);

          if(keypress)
          {
            word_arr[i].x += range_map(word_arr[i].size,txt_min_size,txt_max_size,2,4) * acclerate;
          }
          else {
            word_arr[i].x += range_map(word_arr[i].size,txt_min_size,txt_max_size,2,3);
          }

          if(word_arr[i].x >= width)
          {
            word_arr[i].x = -w.width*2;
            word_arr[i].y = random(0,height);
            word_arr[i].size =  Math.floor(random(txt_min_size,txt_max_size));

          }
        }

        ctx.fill();

        requestAnimationFrame(render);
      }

      render();

      window.addEventListener('keydown',function(){
        keypress = true;
      },true);
      window.addEventListener('keyup',function(){
        keypress = false;
      },true);</script>

</body>
</html>

@许卿

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
VUE | 好看的 404 页面

一、立体文字1.页面效果2.页面代码<!doctype html><html><head><meta charset="utf-8"><title>页面不翼而飞！</title><style>html,body { margin:0; padding:0;}canvas { display:block;}</style></head><body>
复制链接

扫一扫