HTML5之canvas之粒子效果 -

Lixh1986

浏览: 1116458 次

最近访客更多访客>>

Z865785437029

akingde

ningzong

蕃薯耀

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

HTML5之canvas之粒子效果

博客分类：

html5 canvans 粒子特效

效果图：

JavaScript 代码实现：


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin:0;padding:0;}
        html,body{width:100%:height:100%;overflow:hidden;}
    </style>
</head>
<body>
<canvas width="1280" height="910" id="c1"></canvas>
<script>
var body = document.body;
var canvasObj = document.getElementById("c1");
var canvas2d = canvasObj.getContext("2d");
var arr = [];
var count = 300;
var mouse = {};
document.onmousemove = function(evt) {
    var e = evt || window.event;
    mouse = {
        xx: e.clientX,
        yy: e.clientY
    }
}
document.onmouseleave = function() {
    mouse = undefined;
}
document.oncontextmenu = function() {
    return false;
}

function ty() {
    canvas2d.clearRect(0, 0, canvasObj.width, canvasObj.height);
    for (var i = 0; i < count; i++) {
        if (arr.length != count) {
            p = {
                x: Math.floor(Math.random() * body.clientWidth),
                y: Math.floor(Math.random() * body.clientHeight),
                vx: 1 - Math.random() * 2,
                vy: 1 - Math.random() * 2,
                num: 0
            }
        } else {
            p = hua(arr[i]);
        }
        canvas2d.fillStyle = "deepskyblue";
        canvas2d.fillRect(p.x, p.y, 2, 2);
        arr[i] = p;
    }
    jiance(mouse);
}
setInterval(ty, 10);

function hua(p) {
    var a = p;
    if (p.x <= 0 || p.x >= canvasObj.width) {
        a.vx = -p.vx;
        a.x += a.vx;
    } else if (p.y <= 0 || p.y >= canvasObj.height) {
        a.vy = -a.vy;
        a.y += a.vy;
    } else {
        a = {
            x: a.x + a.vx,
            y: a.y + a.vy,
            vx: a.vx,
            vy: a.vy,
            num: 0
        }
    }
    return a;
}

function jiance(mouse) {
    for (var i = 0; i < arr.length; i++) {
        for (var j = 0; j < arr.length; j++) {
            if (i != j) {
                var len = Math.round(arr[i].x - arr[j].x) * Math.round(arr[i].x - arr[j].x) + Math.round(arr[i].y - arr[j].y) * Math.round(arr[i].y - arr[j].y)
                if (len <= 5000 && arr[i].num < 6) {
                    arr[i].num++;
                    canvas2d.lineWidth = 0.5 - len / 2000;
                    canvas2d.beginPath();
                    canvas2d.strokeStyle = "lime";
                    canvas2d.moveTo(arr[i].x + 2, arr[i].y + 2);
                    canvas2d.lineTo(arr[j].x, arr[j].y);
                    canvas2d.stroke();
                }
            }
        }
        if (mouse) {
            var leng = Math.round(arr[i].x - mouse.xx) * Math.round(arr[i].x - mouse.xx) + Math.round(arr[i].y - mouse.yy) * Math.round(arr[i].y - mouse.yy);
            if (leng > 5000 && leng <= 20000) {
                arr[i].x = arr[i].x + (mouse.xx - arr[i].x) / 20;
                arr[i].y = arr[i].y + (mouse.yy - arr[i].y) / 20;
            }
            if (leng <= 20000) {
                canvas2d.lineWidth = 1;
                canvas2d.strokeStyle = "yellow";
                canvas2d.beginPath();
                canvas2d.moveTo(arr[i].x, arr[i].y);
                canvas2d.lineTo(mouse.xx, mouse.yy);
                canvas2d.stroke();
            }
        }
    }
}
console.log("application is running!");
</script>
</body>
</html>

查看图片附件

分享到：

面试，智力题 | JavaScript之ECMAScript6新特性之_03_箭头 ...

2018-01-26 10:32
浏览 1473
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML5之canvas之粒子效果

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML5之canvas之粒子效果

评论

发表评论

相关推荐

Flex之 justify-content 和 flex-direction 的应用

CSS之页面元素飞入效果

CSS之垂直居中

Sass之&引用父选择器

CSS之导航栏设计之 ul 之 li 标签排成一行

HTML5/CSS3鼠标滑过图片滤镜动画效果

CSS之提示框实现

Responsive Web Design（自响应式网页设计）

css 之 linear-gradient 之 进度条（progress bar）

在 css 中使用 @font-face

jQuery之mouseover,mouseover,mouseout,mouseleave

css:flex布局

网站页面配色

BootstrapCSS之Select

CSS样式之带边框的 Anchor（超链接）

bootstrap css之响应式导航栏

CSS之 white-space : pre

CSS - li 元素显示在一行____ a 元素没有下横线

CSS - table 圆角 border radius

[css - hr ] border color 横线高度和颜色

最近访客更多访客>>

css 之 linear-gradient 之进度条（progress bar）