canvans 粒子背景特效

最新推荐文章于 2024-10-12 09:26:17 发布

置顶

最骚的就是你

最新推荐文章于 2024-10-12 09:26:17 发布

阅读量3k

点赞数

分类专栏： web前端学习文章标签： canvans 粒子背景知乎特效

本文链接：https://blog.csdn.net/libin_1/article/details/52484908

版权

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

摘要由CSDN通过智能技术生成

演示效果：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, canvas_width, canvas_height);