需具备js基础知识以及canvas相关方法(可查阅相关文档)

下面是一篇有关js与canvas的背景特效

基于面向过程的思维

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        #canvas {

            display: block;

            background: #000;

        }

    </style>

</head>

<body>

    <canvas id="canvas"></canvas>

    <script>

        window.requestAnimationFrame =(function(){//解决定时器卡问题，使用帧动画

            return window.requestAnimationFrame ||

                    window.webkitRequestAnimationFrame ||

                    window.mozRequestAnimationFrame ||

                    function(callback){

                        window.setInterval (callback,1000/60);

                    };

        })();

        //初始化变量

        var canv=document.getElementsByName("canvas");

        var cxt=canvas.getContext("2d");

        var w,h;

        var num=200;

        var data=[];

        var move={};

        window.onresize=init;//在浏览器窗口变化时重置

        init();

        //获取浏览器宽高并使粒子随机分布

        function init(){

            canvas.width = window.innerWidth ;

            canvas.height = window.innerHeight ;

            w = canvas.width;

            h = canvas.height;

            for(var i=0;i<num;i++){

                data[i]={x:Math.random()*w,y:Math.random()*h,cX:Math.random()*0.6-0.3,cY:Math.random()*0.6-0.3};

                Cricle(data[i].x,data[i].y);

            }

        }

        //绘制粒子

        function Cricle(x,y){

            cxt.save();

            cxt.fillStyle ="pink";

            cxt.beginPath ();

            cxt.arc (x,y,0.5,Math.PI*2,false);

            cxt.closePath ();

            cxt.fill ();

            cxt.restore ();

        }

        //自执行使粒子运动

        !function draw(){

            cxt.clearRect(0,0,w,h);//清除，防止粒子运动成线

            for(var i=0;i<num;i++){

                data[i].x+=data[i].cX;//粒子运动

                data[i].y+=data[i].cY;

                if(data[i].x>w||data[i].x<0) data[i].cX=-data[i].cX;//设置边界值判断防止粒子跑出边界

                if(data[i].y>h||data[i].y<0) data[i].cY=-data[i].cY;

                Cricle(data[i].x,data[i].y);

                for(var j=i+1;j<num;j++){

                    //使粒子连线

                    if((data[i].x-data[j].x)*(data[i].x-data[j].x)+(data[i].y-data[j].y)*(data[i].y-data[j].y)<=50*50){

                        line(data[i].x,data[i].y,data[j].x,data[j].y,false);

                    }

                    //使粒子与鼠标连线

                    if(move.x){

                        if((data[i].x-move.x)*(data[i].x-move.x)+(data[i].y-move.y)*(data[i].y-move.y)<=100*100){

                            line(data[i].x,data[i].y,move.x,move.y,true);

                        }

                    }

                }

            }

            window.requestAnimationFrame(draw);//定时器

//            setInterval(function(){

//                draw();

//            },130);

        }();

        //使粒子的连线颜色渐变

        function line(x1,y1,x2,y2,isMove){

            var color=cxt.createLinearGradient(x1,y1,x2,y2);

            if(!isMove){

                color.addColorStop(0,"yellow");

                color.addColorStop(1,"pink");

            }else{

                color.addColorStop(0,"#fff");

                color.addColorStop(1,"#0bd2dd");

            }

            cxt.save();

            cxt.strokeStyle=color;

            cxt.beginPath();

            cxt.moveTo(x1,y1);

            cxt.lineTo(x2,y2);

            cxt.stroke();

            cxt.restore();

        }

        //鼠标移入与粒子连线

        document.onmousemove=function(e){

            move.x= e.clientX;

            move.y= e.clientY;

        }

    </script>

</body>

</html>

canvas之背景特效的更多相关文章

  1. canvas星空背景特效+CSS旋转相册学习

    今天在看帖子的时候,看到了个有趣的css旋转相册,刚好之前做了一个星空背景dome,这里给大家分享下代码: 旋转相册参考:https://blog.csdn.net/gitchatxiaomi/art ...

  2. 一款由html5 canvas实现五彩小圆圈背景特效

    之前介绍了好几款html5 canvas实现的特效.今天要为大家介绍一款由html5 canvas实现五彩小圆圈背景特效.五彩的小圆圈渐显渐失的特效.效果图如下: 在线预览   源码下载 html代码 ...

  3. 使用Canvas绘制背景图

    原文  http://www.imququ.com/post/use-canvas-as-background-image.html 最近iCloud Web的Beta版换了UI,整体风格变得和iOS ...

  4. HTML5 canvas生成图片马赛克特效插件

    HTML5 canvas生成图片马赛克特效插件 简要教程 这是一款使用html5 canvas来将图片制作成马赛克效果的js插件.该插件的灵感来自于美国肖像画家Chuck Close.已经有人使用这个 ...

  5. Canvas与javaScript特效笔记

    第六章   Canvas与javaScript特效笔记 q  <canvas>标签的用途 HTML5 canvas 提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强 ...

  6. CANVAS模仿龙卷风特效

    大学时候,有一段时间对flash比较感兴趣.去图书馆借了一本很厚很厚的falsh书籍. 翻了几页之后,就再没有往后看过.印象比较深的是作者说他用flash完成了一个龙卷风效果. 一直到现在我也没有看到 ...

  7. [Canvas]动态背景

    欲查看动态效果请点击下载代码再用Chrome或Firefox打开index.html 图例: 代码: <!DOCTYPE html> <html lang="utf-8&q ...

  8. WEB入门.八 背景特效

    学习内容 background属性 CSS Sprite 技术 滑动门技术 能力目标 使用background设置网页背景 使用Sprites制作平滑投票特效 使用滑动门技术实现Tab菜单 本章简介 ...

  9. 结合canvas做雨滴特效

    雨滴特效 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

随机推荐

  1. C++中long是什么类型

    long long本质上还是整型,只不过是一种超长的整型. int型:32位整型,取值范围为-2^31 ~ (2^31 - 1) .long:在32位系统是32位整型,取值范围为-2^31 ~ (2^ ...

  2. bootstrap 默认显示1899问题

    今天使用bootstrap的 dateTimePicker控件时候,又碰到了去年的 显示 1899年的问题,之前解决过,但是忘记了.就记得 他的代码里面有一段是 说格式不正确或者 时间格式小于某个值时 ...

  3. idea导入项目报错：文档中根元素前面的标记必须格式正确

    今天从git上面导入项目之后,由于是上周刚刚提交过的,本地也没有什么修改,于是就从gitlab上面直接下载下来了.可是项目启动时候,报错了... 文档中根元素前面的标记必须格式正确 想想 原来是上次提 ...

  4. c# BackGroundWorker 多线程操作的小例子 (转)

    在我们的程序中,经常会有一些耗时较长的运算,为了保证用户体验,不引起界面不响应,我们一般会采用多线程操作,让耗时操作在后台完成,完成后再进行处理或给出提示,在运行中,也会时时去刷新界面上的进度条等显示 ...

  5. layui分页

    毕业已经两年,期间经历了很多.一个人欢笑与哭泣,在墙角.在路边.在床上.每天搭乘首班车来到公司,每天无数次反省自己,每天每天再问自己为什么活着. 一.下载并引用css和js 地址:点我 <lin ...

  6. Mysql学习---全国省市区以及邮编数据库

    更多下载

  7. IEEP部署企业级网络工程-网络故障-环路故障

    网络故障 1.环路故障 概念 1).以太网是一个支持广播的网络, 在没有环路的环境中,广播报文在网络中以泛洪的形式被送达到网络的第一个角落,以保证每个设备都能够接受到它.每台二层设备在接收到广播报文以 ...

  8. XISE菜刀V13.0 官网版 XISE菜刀VIP破解版 XISE官网

    诠释: 1. 破解VIP登陆限制 2.去后门 (自查) 下载地址 :https://pan.baidu.com/s/1eR2rUOM 查毒地址:http://a.virscan.org/a3983f3 ...

  9. 设计模式：享元（FlyWeight）模式

    设计模式:享元(FlyWeight)模式 一.前言     享元(FlyWeight)模式顾名思义,既是轻量级的,原因就是享元,共享元素,这里的元素指的是对象.如何共享对象,那就是在检测对象产生的时候 ...

  10. C#内存复制结构

    C++中定义结构如下,需要转化成C#的结构 typedef struct tagNET_DVR_CID_ALARM{    DWORD dwSize;    BYTE sCIDCode[CID_COD ...