Canvas特效

最新推荐文章于 2025-07-11 12:01:54 发布

有梦想的风筝

最新推荐文章于 2025-07-11 12:01:54 发布

阅读量826

点赞数 1

分类专栏： css+js

css+js 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用HTML5的canvas元素结合JavaScript实现炫酷的黑客文字流星雨特效。通过简单的HTML结构和CSS样式设置，配合JavaScript定时更新画布上的文字位置与颜色，营造出电影中常见的黑客攻击画面效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天来分享一个炫酷的特效，正如标题所提到的，我们使用到了 canvas 元素，可以理解为是一张画布，有了画布之后，我们就要在画布上进行绘制，而 canvas 元素本身是不具备绘图能力的，所以我们要借助 JavaScript 来完成绘制工作。

HTML 的结构我们只需要一个标签就够了

<canvas id="canvas">
    测试兼容性
</canvas>

设置全局 CSS 样式，很简单，代码如下：

html,body{
    margin:0px;padding:0px;
    overflow:hidden;
    }

获取浏览器屏幕并设置其宽高，设置一个包含 256 个空元素的数组，.join(“1”) 用 1 来把数组里的元素拼接为字符串，.split(“”) 过滤掉数组里的空元素

const canvas = document.getElementById("canvas"),
      ctx    = canvas.getContext("2d"),
      s      = window.screen,
      w      = canvas.width = s.width,
      h      = canvas.height = s.height;

let   words  = Array(256).join("1").split("");

随后绘制矩形，设置填充的颜色及文本

setInterval( () => {
    ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
    ctx.fillRect(0, 0, w, h);
    ctx.fillStyle = "#20af0e";
    //数组元素的映射
    words.map( (y,n) => {
        //生成A-Z a-z之间的值
        text = String.fromCharCode(Math.ceil(65 + Math.random() * 57))
        x = n * 10;
        ctx.fillText(text, x, y);
        words[n] = (y > 758 + Math.random() * 484 )? 0 : y + 10;
    });
},50);