1.代码
getCanvasNew2() {
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 + ")";
}
Star.prototype.draw = function() {
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();
}
Star.prototype.move = function() {
this.y -= .15;
if(this.y <= -10) this.y = HEIGHT + 10;
this.draw();
}
Star.prototype.die = function() {
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;
}
Dot.prototype.draw = function() {
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();
}
Dot.prototype.link = function() {
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 < 0) return false;
if(typeof dots[id - stepback] != "undefined") return dots[id - stepback];
else return false; //getPreviousDot(id - stepback);
}
Dot.prototype.move = function() {
this.a -= this.aReduction;
if(this.a <= 0) {
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();
}
Dot.prototype.die = function() {
dots[this.id] = null;
delete dots[this.id];
}
var canvas = document.getElementById('myCanvas'),
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 < initStarsPopulation; 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);
}
canvas.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 prevX = previousDot.x;
var prevY = previousDot.y;
var diffX = Math.abs(prevX - mouseX);
var diffY = Math.abs(prevY - mouseY);
if(diffX < dotsMinDist || diffY < dotsMinDist) return;
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);
}
},
效果2
2.代码
getCanvasNew() {
// var canvas = document.querySelector('myCanvas'),
var canvas = document.getElementById("myCanvas");
canvas.width = document.documentElement.clientWidth || document.body.clientWidth;
canvas.height = document.documentElement.clientHeight || document.body.clientHeight;
var ctx = canvas.getContext("2d");
ctx.lineWidth = .3;
ctx.strokeStyle = (new Color(150)).style;
var mousePosition = {
x: 30 * canvas.width / 100,
y: 30 * canvas.height / 100
};
var dots = {
nb: 250,
distance: 100,
d_radius: 150,
array: []
};
function colorValue(min) {
return Math.floor(Math.random() * 255 + min);
}
function createColorStyle(r, g, b) {
return 'rgba(' + r + ',' + g + ',' + b + ', 0.8)';
}
function mixComponents(comp1, weight1, comp2, weight2) {
return(comp1 * weight1 + comp2 * weight2) / (weight1 + weight2);
}
function averageColorStyles(dot1, dot2) {
var color1 = dot1.color,
color2 = dot2.color;
var r = mixComponents(color1.r, dot1.radius, color2.r, dot2.radius),
g = mixComponents(color1.g, dot1.radius, color2.g, dot2.radius),
b = mixComponents(color1.b, dot1.radius, color2.b, dot2.radius);
return createColorStyle(Math.floor(r), Math.floor(g), Math.floor(b));
}
function Color(min) {
min = min || 0;
this.r = colorValue(min);
this.g = colorValue(min);
this.b = colorValue(min);
this.style = createColorStyle(this.r, this.g, this.b);
}
function Dot() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.vx = -.5 + Math.random();
this.vy = -.5 + Math.random();
this.radius = Math.random() * 2;
this.color = new Color();
}
Dot.prototype = {
draw: function() {
ctx.beginPath();
ctx.fillStyle = this.color.style;
ctx.arc(this.x, this.y, this.radius, 0, Math.PI, false);
ctx.fill();
}
};
function createDots() {
for(var i = 0; i < dots.nb; i++) {
dots.array.push(new Dot());
}
}
function moveDots() {
for(var i = 0; i < dots.nb; i++) {
var dot = dots.array[i];
if(dot.y < 0 || dot.y > canvas.height) {
dot.vx = dot.vx;
dot.vy = -dot.vy;
} else if(dot.x < 0 || dot.x > canvas.width) {
dot.vx = -dot.vx;
dot.vy = dot.vy;
}
dot.x += dot.vx;
dot.y += dot.vy;
}
}
function connectDots() {
for(var i = 0; i < dots.nb; i++) {
for(var j = 0; j < dots.nb; j++) {
var i_dot = dots.array[i];
var j_dot = dots.array[j];
if((i_dot.x - j_dot.x) < dots.distance && (i_dot.y - j_dot.y) < dots.distance && (i_dot.x - j_dot.x) > -dots.distance && (i_dot.y - j_dot.y) > -dots.distance) {
if((i_dot.x - mousePosition.x) < dots.d_radius && (i_dot.y - mousePosition.y) < dots.d_radius && (i_dot.x - mousePosition.x) > -dots.d_radius && (i_dot.y - mousePosition.y) > -dots.d_radius) {
ctx.beginPath();
ctx.strokeStyle = averageColorStyles(i_dot, j_dot);
ctx.moveTo(i_dot.x, i_dot.y);
ctx.lineTo(j_dot.x, j_dot.y);
ctx.stroke();
ctx.closePath();
}
}
}
}
}
function drawDots() {
for(var i = 0; i < dots.nb; i++) {
var dot = dots.array[i];
dot.draw();
}
}
function animateDots() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
moveDots();
connectDots();
drawDots();
requestAnimationFrame(animateDots);
}
canvas.onmousemove = function(e) {
mousePosition.x = e.pageX;
mousePosition.y = e.pageY;
}
canvas.mouseleave = function(e) {
mousePosition.x = canvas.width / 2;
mousePosition.y = canvas.height / 2;
}
createDots();
requestAnimationFrame(animateDots);
},
效果3
3.代码
getCanvas() {
var canvas = document.getElementById("myCanvas");
canvas.width = document.documentElement.clientWidth;
canvas.height = document.documentElement.clientHeight;
var ctx = canvas.getContext("2d");
//创建小球的构造函数
function Ball() {
this.x = randomNum(3, canvas.width - 3);
this.y = randomNum(3, canvas.height - 3);
this.r = randomNum(1, 3);
this.color = randomColor();
this.speedX = randomNum(-3, 3) * 0.2;
this.speedY = randomNum(-3, 3) * 0.2;
}
Ball.prototype = {
//绘制小球
draw: function() {
ctx.beginPath();
ctx.globalAlpha = 1;
ctx.fillStyle = this.color;
ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
ctx.fill();
},
//小球移动
move: function() {
this.x += this.speedX;
this.y += this.speedY;
//为了合理性,设置极限值
if(this.x <= 3 || this.x > canvas.width - 3) {
this.speedX *= -1;
}
if(this.y <= 3 || this.y >= canvas.height - 3) {
this.speedY *= -1;
}
}
};
//存储所有的小球
var balls = [];
//创建200个小球
for(var i = 0; i < 150; i++) {
var ball = new Ball();
balls.push(ball);
}
main();
function main() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
//鼠标移动绘制线
mouseLine();
//小球与小球之间自动画线
drawLine();
//使用关键帧动画，不断的绘制和清除
window.requestAnimationFrame(main);
}
//添加鼠标移动事件
//记录鼠标移动时的mouseX坐标
var mouseX;
var mouseY;
canvas.onmousemove = function(e) {
var ev = event || e;
mouseX = ev.offsetX;
mouseY = ev.offsetY;
}
//判断是否划线
function drawLine() {
for(var i = 0; i < balls.length; i++) {
balls[i].draw();
balls[i].move();
for(var j = 0; j < balls.length; j++) {
if(i != j) {
if(Math.sqrt(Math.pow((balls[i].x - balls[j].x), 2) + Math.pow((balls[i].y - balls[j].y), 2)) < 80) {
ctx.beginPath();
ctx.moveTo(balls[i].x, balls[i].y);
ctx.lineTo(balls[j].x, balls[j].y);
ctx.strokeStyle = "white";
ctx.globalAlpha = 0.2;
ctx.stroke();
}
}
}
}
}
//使用鼠标移动划线
function mouseLine() {
for(var i = 0; i < balls.length; i++) {
if(Math.sqrt(Math.pow((balls[i].x - mouseX), 2) + Math.pow((balls[i].y - mouseY), 2)) < 80) {
ctx.beginPath();
ctx.moveTo(balls[i].x, balls[i].y);
ctx.lineTo(mouseX, mouseY);
ctx.strokeStyle = "white";
ctx.globalAlpha = 0.8;
ctx.stroke();
}
}
}
//随机函数
function randomNum(m, n) {
return Math.floor(Math.random() * (n - m + 1) + m);
}
//随机颜色
function randomColor() {
return "rgb(" + randomNum(0, 255) + "," + randomNum(0, 255) + "," + randomNum(0, 255) + ")";
}
}
