canvans 粒子背景特效

最新推荐文章于 2025-05-17 16:01:55 发布

原创

最新推荐文章于 2025-05-17 16:01:55 发布 · 置顶 · 3.1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#canvans #粒子 #背景 #知乎 #特效

本文介绍了如何利用canvas技术创建粒子背景特效，并提供了一个在线演示链接供参考，该特效也被应用在了知乎背景中。

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

演示效果：http://www.atool.org/

这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript" src="canvas-nest.js" ></script>
    </body>
</html>

! function() {
   
   
    //封装方法，压缩之后减少文件大小
    function get_attribute(node, attr, default_value) {
   
   
        return node.getAttribute(attr) || default_value;
    }
    //封装方法，压缩之后减少文件大小
    function get_by_tagname(name) {
   
   
        return document.getElementsByTagName(name);
    }
    //获取配置参数
    function get_config_option() {
   
   
        var scripts = get_by_tagname("script"),
            script_len = scripts.length,
            script = scripts[script_len - 1]; //当前加载的script
        return {
            l: script_len, //长度，用于生成id用
            z: get_attribute(script, "zIndex", -1), //z-index
            o: get_attribute(script, "opacity", 0.5), //opacity
            c: get_attribute(script, "color", "0,0,0"), //color
            n: get_attribute(script, "count", 99) //count
        };
    }
    //设置canvas的高宽
    function set_canvas_size() {
   
   
        canvas_width = the_canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, 
        canvas_height = the_canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    }

    //绘制过程
    function draw_canvas() {
   
   
        context.clearRect(0, 0