阿里云云栖大会canvas炫酷动画效果

PROMULGATOR

Macros Da

江苏省

← jQuery滚动数字、计数器(原创)

→ 带刺的花动画效果

相关代码

阿里云云栖大会canvas炫酷动画效果

Canvas字体动画特效

canvas绘制背景

CSS3 H5 星系动画

酷炫粒子背景

js画彩虹背景

Html

Css

Js

body {
	background-color:#1D1D1D
}

function n(e) {
    if (null !== u.x)
        for (var n = 0; n < e; n++) {
            var t = {
                x: u.x,
                y: u.y,
                r: 1,
                speed: 1,
                accel: h,
                accel2: w,
                angle: f
            };
            f += c;
            var o = {
                x: i * Math.cos(t.angle * Math.PI / 180),
                y: i * Math.sin(t.angle * Math.PI / 180)
            };
            t.x += o.x, t.y += o.y, d.push(t)
        }
}

function t() {
    n(s);
    var e = [];
    if (r.clearRect(0, 0, l.width, l.height), (p += a) < 360) {
        u = {
            x: l.width / 2,
            y: l.height / 2,
            angle: p
        };
        var t = u.angle * Math.PI / 180;
        u.x += o * Math.cos(t), u.y += o * Math.sin(t)
    } else p = 0;
    for (; d.length;) {
        var i = d.pop(),
            c = {
                x: i.speed * Math.cos(i.angle * Math.PI / 180),
                y: i.speed * Math.sin(i.angle * Math.PI / 180)
            };
        r.beginPath(), r.moveTo(i.x, i.y), r.lineTo(i.x + c.x, i.y + c.y), r.closePath(), r.stroke(), i.x += c.x, i.y += c.y, i.speed *= i.accel, i.accel += i.accel2, i.x < l.width && i.x > 0 && i.y < l.height && i.y > 0 && e.push(i)
    }
    d = e.slice(0).reverse()
}
var i = 100,
    o = 200,
    a = 1,
    s = 20,
    c = 37,
    l = document.getElementById("bgAni"),
    r = l.getContext("2d"),
    d = [],
    u = {},
    p = 0,
    h = 1.01,
    w = 2e-4,
    m = window.devicePixelRatio || 1,
    f = 0;
l.width = window.innerWidth * m, l.height = window.innerHeight * m, u.x = null, u.y = null, r.strokeStyle = "#8738f6", r.translate(.5, .5), window.requestAnimFrame = function() {
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame ||
            function(e) {
                window.setTimeout(e, 1e3 / 60)
            }
    }(),
    function e() {
        requestAnimFrame(e), t()
    }(), 2 == m && (l.style.width = "100%", l.style.height = "100%")

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

阿里云云栖大会canvas炫酷动画效果



代码描述：仿2018杭州云栖大会H5的canvas 炫酷动画效果，可用作背景

提取自“2018杭州云栖大会 - 阿里云”页面的canvas效果代码，可用作背景。

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>阿里云云栖大会canvas炫酷动画效果-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号