當前位置:
首頁 > 最新 > h5 Canvas滑鼠經過星星連成線動畫特效

h5 Canvas滑鼠經過星星連成線動畫特效

GIF/584K

html5 Canvas滑鼠經過星星連成線動畫特效

html,body {

margin:0;

overflow:hidden;

width:100%;

height:100%;

cursor:none;

background:black;

background:linear-gradient(to bottom,#000000 0%,#5788fe 100%);

}

.filter {

width:100%;

height:100%;

position:absolute;

top:0;

left:0;

background:#fe5757;

animation:colorChange 30s ease-in-out infinite;

animation-fill-mode:both;

mix-blend-mode:overlay;

}

@keyframes colorChange {

0%,100% {

opacity:0;

}

50% {

opacity:.9;

}

}.landscape {

position:absolute;

bottom:0px;

left:0;

width:100%;

height:100%;

/*background-image:url(https://openclipart.org/image/2400px/svg_to_png/250847/Trees-Landscape-Silhouette.png);

*/

background-image:url("http://www.jq22.com/css/img/xkbg.png");

background-size:1000px 250px;

background-repeat:repeat-x;

background-position:center bottom;

}

function Star(id, x, y){

this.id = id;

this.x = x;

this.y = y;

this.r = Math.floor(Math.random()*2)+1;

var alpha = (Math.floor(Math.random()*10)+1)/10/2;

this.color = "rgba(255,255,255,"+alpha+")";

}

ctx.fillStyle = this.color;

ctx.shadowBlur = this.r * 2;

ctx.beginPath();

ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);

ctx.closePath();

ctx.fill();

}

this.y -= .15;

if (this.y

this.draw();

}

stars[this.id] = null;

delete stars[this.id];

}

function Dot(id, x, y, r) {

this.id = id;

this.x = x;

this.y = y;

this.r = Math.floor(Math.random()*5)+1;

this.maxLinks = 2;

this.speed = .5;

this.a = .5;

this.aReduction = .005;

this.color = "rgba(255,255,255,"+this.a+")";

this.linkColor = "rgba(255,255,255,"+this.a/4+")";

this.dir = Math.floor(Math.random()*140)+200;

}

ctx.fillStyle = this.color;

ctx.shadowBlur = this.r * 2;

ctx.beginPath();

ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);

ctx.closePath();

ctx.fill();

}

if (this.id == 0) return;

var previousDot1 = getPreviousDot(this.id, 1);

var previousDot2 = getPreviousDot(this.id, 2);

var previousDot3 = getPreviousDot(this.id, 3);

if (!previousDot1) return;

ctx.strokeStyle = this.linkColor;

ctx.moveTo(previousDot1.x, previousDot1.y);

ctx.beginPath();

ctx.lineTo(this.x, this.y);

if (previousDot2 != false) ctx.lineTo(previousDot2.x, previousDot2.y);

if (previousDot3 != false) ctx.lineTo(previousDot3.x, previousDot3.y);

ctx.stroke();

ctx.closePath();

}

function getPreviousDot(id, stepback) {

if (id == 0 || id - stepback

if (typeof dots[id - stepback] != "undefined") return dots[id - stepback];

else return false;//getPreviousDot(id - stepback);

}

this.a -= this.aReduction;

if (this.a

this.die();

return

}

this.color = "rgba(255,255,255,"+this.a+")";

this.linkColor = "rgba(255,255,255,"+this.a/4+")";

this.x = this.x + Math.cos(degToRad(this.dir))*this.speed,

this.y = this.y + Math.sin(degToRad(this.dir))*this.speed;

this.draw();

this.link();

}

dots[this.id] = null;

delete dots[this.id];

}

var canvas = document.getElementById("canvas"),

ctx = canvas.getContext("2d"),

WIDTH,

HEIGHT,

mouseMoving = false,

mouseMoveChecker,

mouseX,

mouseY,

stars = [],

initStarsPopulation = 80,

dots = [],

dotsMinDist = 2,

maxDistFromCursor = 50;

setCanvasSize();

init();

function setCanvasSize() {

WIDTH = document.documentElement.clientWidth,

HEIGHT = document.documentElement.clientHeight;

canvas.setAttribute("width", WIDTH);

canvas.setAttribute("height", HEIGHT);

}

function init() {

ctx.strokeStyle = "white";

ctx.shadowColor = "white";

for (var i = 0; i

stars[i] = new Star(i, Math.floor(Math.random()*WIDTH), Math.floor(Math.random()*HEIGHT));

//stars[i].draw();

}

ctx.shadowBlur = 0;

animate();

}

function animate() {

ctx.clearRect(0, 0, WIDTH, HEIGHT);

for (var i in stars) {

stars[i].move();

}

for (var i in dots) {

dots[i].move();

}

drawIfMouseMoving();

requestAnimationFrame(animate);

}

window.onmousemove = function(e){

mouseMoving = true;

mouseX = e.clientX;

mouseY = e.clientY;

clearInterval(mouseMoveChecker);

mouseMoveChecker = setTimeout(function() {

mouseMoving = false;

}, 100);

}

function drawIfMouseMoving(){

if (!mouseMoving) return;

if (dots.length == 0) {

dots[0] = new Dot(0, mouseX, mouseY);

dots[0].draw();

return;

}

var previousDot = getPreviousDot(dots.length, 1);

var prevY = previousDot.y;

var diffY = Math.abs(prevY - mouseY);

if (diffX

var xVariation = Math.random() > .5 ? -1 : 1;

xVariation = xVariation*Math.floor(Math.random()*maxDistFromCursor)+1;

var yVariation = Math.random() > .5 ? -1 : 1;

yVariation = yVariation*Math.floor(Math.random()*maxDistFromCursor)+1;

dots[dots.length] = new Dot(dots.length, mouseX+xVariation, mouseY+yVariation);

dots[dots.length-1].draw();

dots[dots.length-1].link();

}

//setInterval(drawIfMouseMoving, 17);

function degToRad(deg) {

return deg * (Math.PI / 180);

}

適用瀏覽器:360、FireFox、Chrome、Opera、傲遊、搜狗、世界之窗. 不支持Safari、IE8及以下瀏覽器。


喜歡這篇文章嗎?立刻分享出去讓更多人知道吧!

本站內容充實豐富,博大精深,小編精選每日熱門資訊,隨時更新,點擊「搶先收到最新資訊」瀏覽吧!


請您繼續閱讀更多來自 嫂子VR 的精彩文章:

UI設計師不可不知的安卓屏幕知識
全方位科普移動端導航的七種設計模式

TAG:嫂子VR |

您可能感興趣

B站欲將碧藍航線動畫化,引百萬日本粉絲轟動,網友:揚眉吐氣!
柏言映畫進軍院線動畫市場,B輪融資正式啟動