canvas 星轨动画

PROMULGATOR

舍儒

浙江省杭州市

← jQuery banner滚动

→ loding效果

相关代码

canvas画ladingview

canvas画图板

canvas炫酷时钟

Html

Css

Js

html,body {
	margin:0;
	padding:0;
	height:100%;
	width:100%;
}
h5 {
	position:fixed;
	top:50%;
	color:#fff;
	left:0px;
	right:0px;
	font-size:2rem;
	text-align:center;
}

var canvas = document.getElementById("main-panel");
var ctx = canvas.getContext("2d");
var showBar = document.querySelector("#show");
var showWord = "";
var devicePixelRatio = window.devicePixelRatio || 1;
var backingStoreRatio = ctx.webkitBackingStorePixelRatio ||
    ctx.mozBackingStorePixelRatio ||
    ctx.msBackingStorePixelRatio ||
    ctx.oBackingStorePixelRatio ||
    ctx.backingStorePixelRatio || 1;
var ratio = devicePixelRatio / backingStoreRatio;
var screenWidth = canvas.width = window.innerWidth * ratio;
var screenHeight = canvas.height = window.innerHeight * ratio;
var centerPointX = screenWidth / 2;
var centerPointY = screenHeight / 2;
canvas.style.width = canvas.width / ratio + "px";
canvas.style.height = canvas.height / ratio + "px";
var lines = [];
var alpha = 0;
var beta = 0;
var gamma = 0;
var mousex = 0;
var mousey = 0;
var betaArr = [];
var gammaArr = [];
//----------------------------
//监听陀螺仪
if (window.DeviceOrientationEvent) {
    window.addEventListener('deviceorientation', function(e) {
        alpha = e.alpha;
        beta = e.beta;
        gamma = e.gamma;
    });
}
//----------------
//监听鼠标位置
function mousePosition(ev) {
    if (ev.pageX || ev.pageY) {
        return {
            x: ev.pageX,
            y: ev.pageY
        };
    }
    return {
        x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,
        y: ev.clientY + document.body.scrollTop - document.body.clientTop
    };
}

function mouseMove(e) {
    e = e || window.event;
    var mousePos = mousePosition(e);
    mousex = mousePos.x;
    mousey = mousePos.y;
}
document.onmousemove = mouseMove;
var startLines = /** @class */ (function() {
    function startLines() {
        this.positionx = -200;
        this.positiony = 0;
        this.r = Math.floor(Math.random() * (Math.sqrt(screenHeight * screenHeight + screenWidth * screenWidth) - 400)) + 400;
        this.startRadio = -(Math.random() * Math.PI / 8 + Math.PI / 8);
        this.endRadio = 0;
        this.red = Math.floor(Math.random() * 155) + 100;
        this.green = Math.floor(Math.random() * 155) + 100;
        this.blue = Math.floor(Math.random() * 155) + 100;
        //opacity:number=Math.floor(Math.random()*10)/10;
        this.opacity = 1;
        this.lineWidth = Math.floor(Math.random() * 6) + 2;
        this.speed = (Math.random() * Math.PI + Math.PI) / this.r;
    }
    startLines.prototype.drawStart = function() {
        var color = "rgba(" + this.red + "," + this.green + "," + this.blue + "," + this.opacity + ")";
        ctx.beginPath();
        ctx.lineWidth = this.lineWidth;
        ctx.arc(this.positionx, this.positiony, this.r, this.startRadio, this.endRadio);
        ctx.strokeStyle = color;
        ctx.stroke();
    };
    startLines.prototype.animate = function() {
        if (gamma || beta) {
            this.positionx = -beta * 2;
            this.positiony = -gamma * 2;
        } else if (mousex || mousey) {
            this.positionx = (centerPointX - mousex) * 0.2;
            this.positiony = (centerPointY - mousey) * 0.2;
        }
        this.startRadio += this.speed;
        this.endRadio += this.speed;
        this.drawStart();
    };
    return startLines;
}());

function recovery(arr, index) {
    var tempArr = [];
    for (var i = 0; i < arr.length; i++) {
        if (i != index) {
            tempArr.push(arr[i]);
        }
    }
    return tempArr;
}
setInterval(function() {
    var starLine = new startLines();
    lines.push(starLine);
    starLine.drawStart();
    for (var i = 0; i < lines.length; i++) {
        if (lines[i].startRadio > Math.PI * 3 / 4) {
            lines = recovery(lines, i);
        }
    }
    if (lines.length > 60) {
        lines.shift();
    }
}, 200);
setInterval(function() {
    betaArr.push(beta);
    gammaArr.push(gamma);
    if (betaArr.length > 30) {
        betaArr.shift();
        gammaArr.shift();
    }
    ctx.clearRect(0, 0, screenWidth, screenHeight);
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(0, screenHeight);
    ctx.lineTo(screenWidth, screenHeight);
    ctx.lineTo(screenWidth, 0);
    ctx.fillStyle = "#222222";
    ctx.closePath();
    ctx.fill();
    for (var _i = 0, lines_1 = lines; _i < lines_1.length; _i++) {
        var item = lines_1[_i];
        item.animate();
    }
}, 1000 / 60);

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

立即下载

canvas 星轨动画



代码描述：适应手机、pc端的星轨动画

使用原生js + 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号