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. Python中with...as的用法

    原文:http://blog.csdn.net/magicharvey/article/details/20226969 这个语法是用来代替传统的try...finally语法的. with EXPR ...

  2. Docker入门（二）：安装/卸载

    这个<Docker入门系列>文档,是根据Docker官网(https://docs.docker.com)的帮助文档大致翻译而成.主要是作为个人学习记录.有错误的地方,Robin欢迎大家指 ...

  3. 【246】◀▶IEW-Unit11

    Unit 11 Transport 1. Model1题目分析 Some countries attempt to solve the problem of traffic congestion by ...

  4. [hdu3530]Subsequence （单调队列）

    题意:求在一段序列中满足m<=max-min<=k的最大长度. 解题关键:单调队列+dp,维护前缀序列的最大最小值,一旦大于k,则移动左端点,取max即可. #include<cst ...

  5. 1、在 Windows 上安装 OpenCV-Python & ubuntu16.04安装 opencv

    Goals In this tutorial We will learn to setup OpenCV-Python in your Windows system. Below steps are ...

  6. array mysql_fetch_row(resource result)

    array mysql_fetch_row(resource result) 函数返回从结果集result中取得的行生成的数组,若到了最后一行之后则返回false,每个结果的列存储在一个数组的单元中 ...

  7. C#中异步及winform中界面假死

    c#中可以用BeginInvoke去启动异步调用,但是有两个BeginInvoke一个是controller的BeginInvoke还有一个是委托的BeginInvoke. 主要区别是controll ...

  8. lower_bound和upper_bound使用说明

    #include <bits/stdc++.h> using namespace std; int main() { ]; ;i<=;i++) { a[i] = i*; } ;i&l ...

  9. AGC001 D - Arrays and Palindrome【构造】

    把回文串的相等关系连一下,发现最后要求的是一笔画问题 注意到奇数长度的中间有一个单独没有连线的,所以a数组至多有两个奇数值 如果没有奇数,那么b在最前面放一个1,然后把a[1]~a[m-1]放上去,这 ...

  10. 洛谷P1313 计算系数

    P1313 计算系数 题目描述 给定一个多项式(by+ax)^k,请求出多项式展开后x^n*y^m 项的系数. 输入输出格式 输入格式: 输入文件名为factor.in. 共一行,包含5 个整数,分别 ...