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. 洛谷 1344 [USACO4.4]追查坏牛奶Pollutant Control——最大流

    题目:https://www.luogu.org/problemnew/show/P1344 那个边数的限制,只要把边权乘1001再+1即可.乘1001是因为有1000条边,这样流量小的不会因为边数多 ...

  2. Nuget-QRCode：jquery-qrcode

    ylbtech-Nuget-QRCode:jquery-qrcode 1.返回顶部 1. <!DOCTYPE html> <html> <head> <tit ...

  3. maven学习九 关于maven一些參數

    一 maven profile:      不同的运行环境,比如开发环境.测试环境.生产环境,而我们的软件在不同的环境中,有的配置可能会不一样,比如数据源配置.日志文件配置.以及一些软件运行过程中的基 ...

  4. Polygon

    用当前的笔绘制一个由两个或多个点(顶点)连接的多边形. BOOL Polygon( LPPOINT lpPoints, int nCount ); lpPoints 指向一个指定多边形顶点的点.数组中 ...

  5. ie8兼容rgba的方法

    现在做个网页还得考虑ie8,只想说:尼玛! 但是没办法,屈于淫威也得弄. 首先说下rgba的含义吧,rgba,r代表red,g代表green,b代表blue,a代表透明度. filter:progid ...

  6. 面试题: mysql数据库 已看1 索引和事务 没用

    mysql数据库面试总结 2017年09月04日 00:11:40 阅读数:151 结合网上大神还有自己面试经历,收集的总结Mysql面试题,方便自己准备面试: mysql一个永远都复习不完,尽量总结 ...

  7. Java&nbsp;keytool命令说明

    Java keytool命令说明 Java 中的 keytool.exe (位于 JDK\Bin 目录下)可以用来创建数字证书,所有的数字证书是以一条一条(采用别名区别)的形式存入证书库的中,证书库中 ...

  8. 连接带密码的access数据库

    在网上找了很多都不靠谱,稀里哗啦的弄一堆连接字符串,很不优雅. 这个方法很简单: 1.在“连接”这页中,下方有“输入登录数据库的信息”用户名:admin,并在下面选择“空白密码” 2.在“所有”这页的 ...

  9. state estimation for robotics-1

    概率论是探讨SLAM的一个重要的工具,概率密度函数的概率意义在于它能够描述一个随机变量位于任意区间的概率. p(x<=x<=x+dx)≍p(x).dx(由拉格朗日中值定理)

  10. iframe父页面和子页面相互调用的方法

    随着W3C一声令下,几年前使用非常频繁的frameset + frame已完成使命,光荣退伍.作为frameset的替代方案(姑且这么称吧),iframe的使用也多了起来.较frameset方案,if ...