用HTML5Canvas实现璀璨星空
2016-05-25 17:12
585 查看
演示效果如下:
演示地址如下:http://119.29.253.206/brilliantStars.html
演示代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<canvas height="620" width="1360" id="canvas"
style="position: absolute; height: 100%; background-color: black;"/></canvas>
<script type="text/javascript">
var canvasEl = document.getElementById('canvas');
var ctx = canvasEl.getContext('2d');
var mousePos = [0, 0];
var nodes = [];
var edges = [];
var easingFactor=0.6;
var edgeColor="white";
var nodeColor="white";
window.onresize = function () {
canvasEl.width = document.body.clientWidth;
canvasEl.height = canvasEl.clientHeight;
if (nodes.length == 0) {
constructNodes();
}
render();
step();
};
window.onresize();
function constructNodes() {
for (var i = 0; i < 100; i++) {
var node = {
drivenByMouse: i == 0,
x: Math.random() * canvasEl.width,
y: Math.random() * canvasEl.height,
vx: Math.random() * 1 - 0.5,
vy: Math.random() * 1 - 0.5,
radius: Math.random() > 0.9 ? 3 + Math.random() * 3 : 1 + Math.random() * 3
};
nodes.push(node);
}
nodes.forEach(function (e) {
nodes.forEach(function (e2) {
if (e == e2) {
return;
}
var edge = {
from: e,
to: e2
}
addEdge(edge);
});
});
}
function addEdge(edge) {
var ignore = false;
edges.forEach(function (e) {
if (e.from == edge.from & e.to == edge.to) {
ignore = true;
}
if (e.to == edge.from & e.from == edge.to) {
ignore = true;
}
});
if (!ignore) {
edges.push(edge);
}
}
function step() {
nodes.forEach(function (e) {
if (e.drivenByMouse) {
return;
}
e.x += e.vx;
e.y += e.vy;
function clamp(min, max, value) {
if (value > max) {
return max;
} else if (value < min) {
return min;
} else {
return value;
}
}
if (e.x <= 0 || e.x >= canvasEl.width) {
e.vx *= -1;
e.x = clamp(0, canvasEl.width, e.x)
}
if (e.y <= 0 || e.y >= canvasEl.height) {
e.vy *= -1;
e.y = clamp(0, canvasEl.height, e.y)
}
});
adjustNodeDrivenByMouse();
render();
window.requestAnimationFrame(step);
}
function adjustNodeDrivenByMouse() {
nodes[0].x += (mousePos[0] - nodes[0].x) / easingFactor;
nodes[0].y += (mousePos[1] - nodes[0].y) / easingFactor;
}
function render() {
ctx.fillStyle = canvasEl.style.backgroundColor;
ctx.fillRect(0, 0, canvasEl.width, canvasEl.height);
edges.forEach(function (e) {
var l = lengthOfEdge(e);
var threshold = canvasEl.width / 8;
if (l > threshold) {
return;
}
ctx.strokeStyle = edgeColor;
ctx.lineWidth = (1.0 - l / threshold) * 2.5;
ctx.globalAlpha = 1.0 - l / threshold;
ctx.beginPath();
ctx.moveTo(e.from.x, e.from.y);
ctx.lineTo(e.to.x, e.to.y);
ctx.stroke();
});
ctx.globalAlpha = 1.0;
nodes.forEach(function (e) {
if (e.drivenByMouse) {
return;
}
ctx.fillStyle = nodeColor;
ctx.beginPath();
ctx.arc(e.x, e.y, e.radius, 0, 2 * Math.PI);
ctx.fill();
});
}
function lengthOfEdge(e){
return Math.sqrt( Math.pow((e.from.x-e.to.x),2)+
Math.pow((e.from.y-e.to.y),2) );
}
</script>
</body>
</html>
演示地址如下:http://119.29.253.206/brilliantStars.html
演示代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<canvas height="620" width="1360" id="canvas"
style="position: absolute; height: 100%; background-color: black;"/></canvas>
<script type="text/javascript">
var canvasEl = document.getElementById('canvas');
var ctx = canvasEl.getContext('2d');
var mousePos = [0, 0];
var nodes = [];
var edges = [];
var easingFactor=0.6;
var edgeColor="white";
var nodeColor="white";
window.onresize = function () {
canvasEl.width = document.body.clientWidth;
canvasEl.height = canvasEl.clientHeight;
if (nodes.length == 0) {
constructNodes();
}
render();
step();
};
window.onresize();
function constructNodes() {
for (var i = 0; i < 100; i++) {
var node = {
drivenByMouse: i == 0,
x: Math.random() * canvasEl.width,
y: Math.random() * canvasEl.height,
vx: Math.random() * 1 - 0.5,
vy: Math.random() * 1 - 0.5,
radius: Math.random() > 0.9 ? 3 + Math.random() * 3 : 1 + Math.random() * 3
};
nodes.push(node);
}
nodes.forEach(function (e) {
nodes.forEach(function (e2) {
if (e == e2) {
return;
}
var edge = {
from: e,
to: e2
}
addEdge(edge);
});
});
}
function addEdge(edge) {
var ignore = false;
edges.forEach(function (e) {
if (e.from == edge.from & e.to == edge.to) {
ignore = true;
}
if (e.to == edge.from & e.from == edge.to) {
ignore = true;
}
});
if (!ignore) {
edges.push(edge);
}
}
function step() {
nodes.forEach(function (e) {
if (e.drivenByMouse) {
return;
}
e.x += e.vx;
e.y += e.vy;
function clamp(min, max, value) {
if (value > max) {
return max;
} else if (value < min) {
return min;
} else {
return value;
}
}
if (e.x <= 0 || e.x >= canvasEl.width) {
e.vx *= -1;
e.x = clamp(0, canvasEl.width, e.x)
}
if (e.y <= 0 || e.y >= canvasEl.height) {
e.vy *= -1;
e.y = clamp(0, canvasEl.height, e.y)
}
});
adjustNodeDrivenByMouse();
render();
window.requestAnimationFrame(step);
}
function adjustNodeDrivenByMouse() {
nodes[0].x += (mousePos[0] - nodes[0].x) / easingFactor;
nodes[0].y += (mousePos[1] - nodes[0].y) / easingFactor;
}
function render() {
ctx.fillStyle = canvasEl.style.backgroundColor;
ctx.fillRect(0, 0, canvasEl.width, canvasEl.height);
edges.forEach(function (e) {
var l = lengthOfEdge(e);
var threshold = canvasEl.width / 8;
if (l > threshold) {
return;
}
ctx.strokeStyle = edgeColor;
ctx.lineWidth = (1.0 - l / threshold) * 2.5;
ctx.globalAlpha = 1.0 - l / threshold;
ctx.beginPath();
ctx.moveTo(e.from.x, e.from.y);
ctx.lineTo(e.to.x, e.to.y);
ctx.stroke();
});
ctx.globalAlpha = 1.0;
nodes.forEach(function (e) {
if (e.drivenByMouse) {
return;
}
ctx.fillStyle = nodeColor;
ctx.beginPath();
ctx.arc(e.x, e.y, e.radius, 0, 2 * Math.PI);
ctx.fill();
});
}
function lengthOfEdge(e){
return Math.sqrt( Math.pow((e.from.x-e.to.x),2)+
Math.pow((e.from.y-e.to.y),2) );
}
</script>
</body>
</html>
相关文章推荐
- Qunee for HTML5
- 【Egret】中tree组件使用案例
- h5中设置div中的内容水平并垂直居中
- HTML5 Canvas绘制环形进度条
- H5 压缩图片上传(pc端适用)支持png/jpg格式(其他格式都会转为png)
- html5使用小技巧(永久更新,多为转载)
- 关于HTML5新API————visibilityState
- HTML5loaclstorage
- HTMl5的sessionStorage和localStorage
- html5带下拉框的input
- h5-news_index
- html5获取地理位置
- html5 websocket
- HTML5 做聊天,用环信SDK做聊天的服务器,用户注册登录成功与添加好友(一)
- HTML5 第九次 作业
- h5 与native
- html5 canvas写成的水墨大写意画笔
- HTML5新增元素(下)
- HTML5全栈开发究竟是什么 定义阐述
- 翻译:HTML5与HTML4的区别