canvas背景效果:

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<canvas id="canvas" width="" height=""></canvas>

</body>

<script>

    let canvas = document.getElementById('canvas');

    let ctx = canvas.getContext('2d');

    let w = canvas.width = canvas.offsetWidth;

    let h = canvas.height = canvas.offsetHeight;

    let circles = [];

    function rand(min, max) {

        return parseInt(Math.random() * (max - min + ) + min);

    }

    class Circle {

        constructor() {

            this.r = rand(, );

            let x = rand(, canvas.width - this.r);

            let y = rand(, canvas.height - this.r);

            this.x = x < this.r ? this.r : x;

            this.y = y < this.r ? this.r : y;

            let speed = rand(, );

            this.speedX = rand(, ) >  ? speed : -speed;

            this.speedY = rand(, ) >  ? speed : -speed;

        }

        drawCircle(ctx) {

            ctx.beginPath();

            ctx.arc(this.x, this.y, this.r, , );

            ctx.closePath();

            ctx.fillStyle = 'rgba(204,204,204,0.3)';

            ctx.fill();

        }

        drawLine(ctx, _circle) {

            let dx = this.x - _circle.x;

            let dy = this.y - _circle.y;

            let d = Math.sqrt(dx * dx + dy * dy);

            if (d < ) {

                ctx.beginPath();

                ctx.moveTo(this.x, this.y);

                ctx.lineTo(_circle.x, _circle.y);

                ctx.closePath();

                ctx.strokeStyle = 'rgba(204,204,204,0.3)';

                ctx.stroke();

            }

        }

        move(w, h) {

            this.x += this.speedX / ;

            if (this.x > w || this.x < ) {

                this.speedX *= -;

            }

            this.y += this.speedY / ;

            if (this.y > h || this.y < ) {

                this.speedY *= -;

            }

        }

    }

    class curCircle extends Circle {

        constructor() {

            super();

        }

        drawCircle(ctx) {

            ctx.beginPath();

            this.r = ;

            ctx.arc(this.x, this.y, this.r, , );

            ctx.closePath();

            ctx.fillStyle = 'rgba(255,77,54,0.6)';

            ctx.fill();

        }

    }

    let circle = new curCircle();

    let draw = function () {

        ctx.clearRect(, , w, h);

        for (let i = ; i < circles.length; i++) {

            circles[i].drawCircle(ctx);

            for (j = i + ; j < circles.length; j++) {

                circles[i].drawLine(ctx, circles[j]);

            }

            circles[i].move(w, h);

        }

        if (circle.x) {

            circle.drawCircle(ctx);

            for (let k = ; k < circles.length; k++) {

                circle.drawLine(ctx, circles[k])

            }

        }

        requestAnimationFrame(draw);

    };

    let init = function (num) {

        for (let i = ; i < num; i++) {

            circles.push(new Circle());

        }

        draw();

    };

    window.addEventListener('load', init());

    canvas.addEventListener('mousemove', function (e) {

        e = e || window.event;

        circle.x = e.offsetX;

        circle.y = e.offsetY;

    });

    canvas.addEventListener('mouseout', function (e) {

        circle.x = null;

        circle.y = null;

    });

</script>

</html>

canvas背景效果的更多相关文章

  1. Canvas 示例：4种超炫的网站动画背景效果

    今天,我们想分享一些动画背景的灵感.全屏背景图片的网站头部是最新的网页设计趋势,已经持续了一段时间.最近人们一直在转向动画添加更多的视觉兴趣到他们的网站中,在这里我们想向您分享几个使用  JavaSc ...

  2. 超多经典 canvas 实例，动态离子背景、移动炫彩小球、贪吃蛇、坦克大战、是男人就下100层、心形文字等等等

    超多经典 canvas 实例 普及:<canvas> 元素用于在网页上绘制图形.这是一个图形容器,您可以控制其每一像素,必须使用脚本来绘制图形. 注意:IE 8 以及更早的版本不支持 &l ...

  3. html5 canvas常用api总结(三)--图像变换API

    canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...

  4. 【探索】利用 canvas 实现数据压缩

    前言 HTTP 支持 GZip 压缩,可节省不少传输资源.但遗憾的是,只有下载才有,上传并不支持.如果上传也能压缩,那就完美了.特别适合大量文本提交的场合,比如博客园,就是很好的例子. 虽然标准不支持 ...

  5. 简单入门canvas - 通过刮奖效果来学习

    一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...

  6. 获取Canvas当前坐标系矩阵

    前言 在我的另一篇博文 Canvas坐标系转换 中,我们知道了所有的平移缩放旋转操作都会影响到画布坐标系.那在我们对画布进行了一系列操作之后,怎么再知道当前矩阵数据状态呢. 具体代码 首先请看下面的一 ...

  7. Canvas坐标系转换

    默认坐标系与当前坐标系 canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸.左上角坐标为x=0,y=0的点称作原点.在默认坐标系中,每一个点的坐标都是直接 ...

  8. Canvas绘图之平移translate、旋转rotate、缩放scale

    画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transform()来改变,它们会对画布的变换矩阵产生影响. 函数 方法 描 ...

  9. 用html5的canvas和JavaScript创建一个绘图程序

    本文将引导你使用canvas和JavaScript创建一个简单的绘图程序. 创建canvas元素 首先准备容器Canvas元素,接下来所有的事情都会在JavaScript里面. <canvas ...

随机推荐

  1. Ubuntu——查看内存和CPU情况

    查看内存及cpu使用情况的命令:top 也可以安装htop工具,这样更直观,安装命令如下:sudo apt-get install htop安装完后,直接输入命令:htop

  2. spring-data-cassanra的简单使用

    之前写了JAVA操作cassandra驱动包,现在来看看spring-data对cassandra的支持.这里是spring-data-cassandra的官方文档:http://docs.sprin ...

  3. MVC 模式介绍（1）

    MVC 模式 MVC 模式代表 Model-View-Controller(模型-视图-控制器) 模式.这种模式用于应用程序的分层开发. Model(模型) - 模型代表一个存取数据的对象或 JAVA ...

  4. sublime text3设置

    我的sublime的设置,ps:这个博文只是为了我自己的一个记录 { "color_scheme": "Packages/Theme - Solarized Flat/S ...

  5. [poj1222]EXTENDED LIGHTS OUT(高斯消元)

    题意:每个灯开启会使自身和周围的灯反转,要使全图的灯灭掉,判断灯开的位置. 解题关键:二进制高斯消元模板题. 复杂度:$O({n^3})$ #include<cstdio> #includ ...

  6. 【hdu4570】Multi-bit Trie 区间DP

    标签: 区间dp hdu4570 http://acm.hdu.edu.cn/showproblem.php?pid=4570 题意:这题题意理解变态的.转自大神博客: 这题题意确实有点难懂,起码对于 ...

  7. centos6.5 下安装 sqlplus

    1.下载下面的 rpm 文件 oracle-instantclient12.-basic--.x86_64.rpm oracle-instantclient12.-devel--.x86_64.rpm ...

  8. linux多线程加解锁

    1.动态方式使用互斥量,该类型的互斥量在定义时不进行初始化,需要在使用之前初始化,使用结束销毁 1.1.定义一个锁变量:         pthread_mutex_t g_mutex_Msg; 1. ...

  9. POJ 2976 Dropping tests (二分+贪心)

    题意:给定 n 个分数,然后让你去年 m 个分数,使得把剩下的所有的分子和分母都相加的分数最大. 析:这个题并不是分子越大最后结果就越大,也不是整个分数越大,最后结果就越大的,我们可以反过来理解,要去 ...

  10. WordPress博客搭建指南

    WordPress是一个以PHP和MySQL为平台的自由开源的博客软件和内容管理系统.WordPress具有插件架构和模板系统.Alexa排行前100万的网站中有超过16.7%的网站使用WordPre ...