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. Lagom学习 （三）

    lagom代码中有大量的Lambda表达式,首先补习一下lambda表达式和函数式接口的相关知识. 一: 函数式接口: 函数式接口其实本质上还是一个接口,但是它是一种特殊的接口: 这种类型的接口,使得 ...

  2. => in Scala

    What does => mean in Scala? 操作符=>在Scala中什么意思? 百度了下,有个论坛给出了比较全面的回答,请参见http://stackoverflow.com/ ...

  3. JavaScript与DOM常见面试题

    1. JavaScript 1.1.简要描述 JavaScript的数据类型? 参考答案: Java Sc ri pt 的数据类型可以分为原始类型和对象类型.原始类型包括 string. number ...

  4. [poj2891]Strange Way to Express Integers(扩展中国剩余定理)

    题意:求解一般模线性同余方程组 解题关键:扩展中国剩余定理求解.两两求解. $\left\{ {\begin{array}{*{20}{l}}{x = {r_1}\,\bmod \,{m_1}}\\{ ...

  5. Hadoop中Partition解析

    1.解析Partition Map的结果,会通过partition分发到Reducer上,Reducer做完Reduce操作后,通过OutputFormat,进行输出,下面我们就来分析参与这个过程的类 ...

  6. FZU - 2214 Knapsack problem 01背包逆思维

    Knapsack problem Given a set of n items, each with a weight w[i] and a value v[i], determine a way t ...

  7. FZU - 2109 Mountain Number 数位dp

    Mountain Number One integer number x is called "Mountain Number" if: (1) x>0 and x is a ...

  8. EIP权限工作流平台-移动端

  9. 30个物联网传感器小实验：三行代码点亮LED灯

    30个物联网传感器小实验:三行代码点亮LED灯 三行代码点亮LED灯 LED灯闪烁 LED灯调亮度 LED淡入淡出 不写一行代码点亮LED灯 全彩RGB灯 面包板 30个物联网传感器小实验:三行代码点 ...

  10. java大神进阶之路

    既然励志在java路上走的更远,那就必须了解java的路径.先看图 更加细化的细节如下 一: 编程基础 不管是C还是C++,不管是Java还是PHP,想成为一名合格的程序员,基本的数据结构和算法基础还 ...