`

HTML5之canvas之粒子效果

    博客分类:
  • css
阅读更多
效果图:




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>
















-
  • 大小: 101.7 KB
分享到:
评论

相关推荐

    HTML5 Canvas矩阵粒子波浪背景动画特效

    这个HTML5 Canvas矩阵粒子波浪背景动画特效展示了Canvas的潜力,以及如何通过JavaScript和数学原理实现复杂而引人入胜的视觉效果。学习并理解这些技术对于想要提升Web前端开发技能,特别是对游戏开发和互动设计感...

    html5 canvas 3D海洋粒子波浪动画特效

    本项目“html5 canvas 3D海洋粒子波浪动画特效”正是利用这一特性,通过JavaScript编程实现了一种酷炫的3D海洋效果,营造出仿佛无尽延伸的波浪粒子动画。 在Canvas中,我们通过`context`对象提供的绘图方法,如`...

    html5 canvas彩色网状线条粒子动画特效.rar

    html5 canvas彩色网状线条粒子动画特效.rar html5 canvas彩色网状线条粒子动画特效.rar html5 canvas彩色网状线条粒子动画特效.rar html5 canvas彩色网状线条粒子动画特效.rar html5 canvas彩色网状线条粒子动画特效...

    HTML5 Canvas彩色粒子丝带飘动动画特效

    总的来说,这款HTML5 Canvas彩色粒子丝带飘动动画特效通过Canvas API实现了粒子的动态生成、移动和绘制,利用JavaScript编程实现了飘动的效果。它展示了HTML5在现代网页设计中的强大潜力,为用户带来生动、有趣的...

    HTML5 Canvas粒子流动爱心形状动画特效

    总结来说,这个"HTML5 Canvas粒子流动爱心形状动画特效"结合了Canvas的图形绘制能力、粒子系统的动态效果以及CSS的样式控制,创造出一种浪漫且引人注目的视觉体验。开发者可以通过学习和理解这个案例,深入掌握...

    HTML5 Canvas模糊圆点粒子背景动画特效

    这款"HTML5 Canvas模糊圆点粒子背景动画特效"是利用Canvas API实现的一种交互式、动态的背景设计,其核心是通过JavaScript编程来操纵成千上万的圆点,形成流动、闪烁的效果,为网页增添一种神秘而迷人的氛围。...

    html5 canvas绘制随机流动粒子动画背景特效

    在这个特定的场景中,我们讨论的是如何使用Canvas来制作一个随机流动的粒子动画背景特效。这个特效可以增加网页的视觉吸引力,为用户带来更沉浸式的浏览体验。 首先,我们要了解Canvas的基本概念。Canvas是一个HTML...

    HTML5 Canvas酷炫棱镜粒子飞出动画特效

    总结一下,这个项目利用了HTML5 Canvas的绘图功能,结合JavaScript实现了粒子系统和动态飞出动画,通过CSS调整了页面样式,从而在网页上创造出了一种酷炫的棱镜粒子效果。这不仅展示了HTML5技术的潜力,也为Web...

    html5 canvas酷炫的粒子组合文字动画特效

    在这个场景中,我们将深入探讨如何使用HTML5 Canvas实现酷炫的粒子组合文字动画特效。 首先,我们需要在HTML页面中添加一个`&lt;canvas&gt;`标签,并通过JavaScript获取其上下文。通常我们使用`2d`渲染上下文,因为它提供...

    html5 canvas云粒子数字时钟动画特效

    在这个“html5 canvas云粒子数字时钟动画特效”中,我们看到的是Canvas技术与时间显示、粒子系统相结合的应用实例。下面将详细阐述相关知识点。 1. HTML5 Canvas API: HTML5 Canvas是一个基于矢量图形的画布,...

    html5 canvas动态的粒子文字特效

    通过调整粒子的运动速度、颜色、大小等因素,我们可以创造出各种不同的粒子效果,如飘散、旋转、聚集等,让文字看起来像是由动态的粒子构成的。 以上就是使用HTML5 Canvas创建动态粒子文字特效的基本流程。在实际...

    HTML5 Canvas鼠标移动圆点粒子跟随动画特效

    在这个“HTML5 Canvas鼠标移动圆点粒子跟随动画特效”中,我们看到一个创新且引人入胜的互动设计,用户可以通过鼠标移动来控制页面上的圆点粒子运动,实现了视觉与交互的完美融合。 首先,我们需要理解Canvas的基本...

    html5 canvas彩色烟花粒子动画特效

    在这个“html5 canvas彩色烟花粒子动画特效”项目中,开发者利用Canvas API创建了一个互动式的烟花秀,用户不仅可以欣赏到五彩斑斓的烟花绽放,还能通过右上角的设置调整动画参数,甚至通过鼠标点击触发新的烟花。...

    html5 canvas时光隧道3D粒子动画特效

    HTML5 Canvas时光隧道3D粒子动画特效是一种利用HTML5 Canvas元素和JavaScript技术实现的动态视觉效果。Canvas是HTML5中的一个重要组成部分,它提供了一个在网页上绘制图形的API,允许开发者通过JavaScript来绘制和...

    HTML5 Canvas彩色圆点粒子飘动动画特效

    本项目“HTML5 Canvas彩色圆点粒子飘动动画特效”利用了Canvas API来创建一个动态的、视觉吸引人的背景效果,其中彩色的圆点粒子随机地放大缩小并飘动。 首先,Canvas API提供了`&lt;canvas&gt;`元素,它是一个可绘制二维...

    HTML5 Canvas浮动彩色粒子背景动画特效

    这款“HTML5 Canvas浮动彩色粒子背景动画特效”利用了Canvas元素的特性,构建了一个生动且互动的背景效果。下面我们将深入探讨相关的HTML5 Canvas知识点。 1. **HTML5 Canvas基础** HTML5 Canvas是一个基于矢量...

    html5 canvas粒子动画进度条加载特效

    在这个“html5 canvas粒子动画进度条加载特效”中,我们主要探讨的是如何利用Canvas API来构建一种创新的加载动画,这种动画不仅具有线条边框风格,还能以百分比形式展示加载进度。 首先,Canvas API是HTML5提供的...

    HTML5+Canvas实现的超炫粒子效果文字动画特效源码

    在这个项目中,“HTML5+Canvas实现的超炫粒子效果文字动画特效源码”是一个利用这两种技术来创建独特视觉体验的实例。下面将详细讲解这个特效背后的原理和实现方法。 首先,HTML5是下一代超文本标记语言,它扩展了...

    vue canvas 粒子拼图特效

    在本项目中,我们探讨的是如何在Vue框架中利用HTML5的Canvas元素创建一个粒子拼图特效。Vue.js是一个流行的JavaScript前端框架,它允许开发者构建用户界面,而Canvas则是一种在网页上绘制2D图形的技术。这个特效结合...

    HTML5 Canvas粒子效果文字动画特效

    "HTML5 Canvas粒子效果文字动画特效"是一个利用Canvas API实现的创新技术,通过粒子系统来展示动态的文字动画效果。这篇文章将深入探讨如何使用Canvas实现这种特效,以及涉及到的相关技术点。 首先,Canvas API是...

Global site tag (gtag.js) - Google Analytics