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. NOI.AC 31 MST——整数划分相关的图论(生成树、哈希)

    题目:http://noi.ac/problem/31 模拟 kruscal 的建最小生成树的过程,我们应该把树边一条一条加进去:在加下一条之前先把权值在这一条到下一条的之间的那些边都连上.连的时候要 ...

  2. 梯度算子（普通的+Robert + sobel + Laplace）

    1.水平垂直差分法: 2.Robert 算子梯度 3.sobel算子 4.拉普拉斯算子

  3. 用idea工具对java打包：命令 mvn clear package，报错

    用idea工具对java打包:命令 mvn clear package,报错 网上都是eclipse的,要么是project structure和setting的(当然这俩也要用) 我都试了,每一个能 ...

  4. 关于JSP页面中的pageEncoding和contentType两种属性的区别

    转自:http://blog.csdn.net/dragon4s/article/details/6604624 JSP指令标签中<%@ page contentType="text/ ...

  5. 滴滴Booster移动APP质量优化框架 学习之旅 三

    推荐阅读: 滴滴Booster移动App质量优化框架-学习之旅 一 Android 模块Api化演练 不一样视角的Glide剖析(一) 滴滴Booster移动App质量优化框架-学习之旅 二对重复资源 ...

  6. ACM-ICPC2018焦作网络赛 Participate in E-sports（大数开方）

    Participate in E-sports 11.44% 1000ms 65536K   Jessie and Justin want to participate in e-sports. E- ...

  7. Guid.NewGuid().ToString()的几种格式 (转)

    1.Guid.NewGuid().ToString("N") 结果为:      38bddf48f43c48588e0d78761eaa1ce6 2.Guid.NewGuid() ...

  8. 函数PARSENAME使用和截取字符串

    MS SQL server有一个函数PARSENAME ( 'object_name' , object_piece ). 函数有2个参数: Object_name 检索的对象名称.即是:服务器名.数 ...

  9. 火狐restclient安装和使用

    RESTClient是一款用于测试各种Web服务的插件,它可以向服务器发送各种HTTP请求(用户也可以自定义请求方式),并显示服务器响应.使用RESTClient您可以方便的测试各种Web服务,为您的 ...

  10. jenkins 找不到mvn 命令

    错误如下: /data/jenkins/temp/hudson9132559581388971644.sh: line 4: mvn: command not found 方法如下: 1  修改环境变 ...