前端HTML5 CANVAS随机点线视觉3D效果
摘要：web前端开发个人博客网站 网站前端总体开发流程与设计 网站开发前端如何开发 $(function() { var canvasBg = new PointLine( ‘#canvas’, 15, parseInt($(window).height……
web前端开发个人博客网站 网站前端总体开发流程与设计 网站开发前端如何开发
$(function() {
var canvasBg = new PointLine(
‘#canvas’,
15,
parseInt($(window).height()),
parseInt($(window).width()),
)
canvasBg.lineColor = ‘red’
canvasBg
.drawLine()
.drawPoint(15)
.reDraw(100, 50) //.mouseMove();
})
代码片段 1
<!DOCTYPE html>
<html>
<head lang=”en”>
<meta charset=”UTF-8″>
<title>html5-canvas制作动态点线背景</title>
<link rel=”stylesheet” href=”http://yui.yahooapis.com/3.18.1/build/cssnormalize/cssnormalize-min.css”>
<style>
canvas {
background: #000;
display: block;
}
</style>
<script>
$(function () {
var canvasBg = new PointLine(‘#canvas’, 15, parseInt($(window).height()), parseInt($(window).width()));
canvasBg.lineColor = ‘red’;
canvasBg.drawLine().drawPoint(15).reDraw(100, 50)//.mouseMove();
});
//PointLine object
function PointLine(ele, num, height, width) {
this.ele = $(ele);
this.num = num ? parseInt(num) : 10;
this.radius = 3;
this.height = height ? parseInt(height) : 800;
this.width = width ? parseInt(width) : 600;
this.pointColor = ‘#fff’;
this.lineColor = ‘#fff’;
this.pointArr = [];
//point Array
var ele = this.ele, num = this.num, height = this.height, width = this.width;
ele.get(0).height = height;
ele.get(0).width = width;
for (var i = 0; i < num; i++) {
var px = Math.floor(Math.random() * (width – 1) + 1), py = Math.floor(Math.random() * (height – 1) + 1);
(function () {
for (var j in this.pointArr) {
if (px == this.pointArr[j][0]) {
px = Math.floor(Math.random() * (width – 1) + 1);
} else {
return px;
}
}
}());
this.pointArr.push([px, py]);
}
}
PointLine.prototype = {
drawPoint: function () {
var ele = this.ele, eleGet = ele.get(0), radius = this.radius, height = this.height, pointColor = this.pointColor, arr = this.pointArr;
//radius value
if (arguments.length >= 1) {
radius = !isNaN(parseInt(arguments[0])) ? parseInt(arguments[0]) : radius;
this.radius = radius;
}
//3D Array
var leftArr = [], rightArr = [];
for (var i in arr) {
if (arr[i][0] <= height / 2) {
leftArr.push(arr[i]);
} else {
rightArr.push(arr[i]);
}
}
//draw point
if (eleGet.getContext) {
var leftRadius = 0, rightRadius = 0;
for (var i in leftArr) {
drawAnim(leftArr[i], leftRadius);
leftRadius += radius / leftArr.length / 1.2;
}
for (var i in rightArr) {
drawAnim(rightArr[i], rightRadius);
rightRadius += radius / rightArr.length / 1.2;
}
}
function drawAnim(arr, sub) {
var point = eleGet.getContext(‘2d’);
point.fillStyle = pointColor;
point.beginPath();
point.arc(arr[0], arr[1], (radius – sub), 0, 2 * Math.PI, false);
point.fill();
}
return this;
},
drawLine: function () {
var eleGet = this.ele.get(0), lineColor = this.lineColor, arr = this.pointArr;
if (eleGet.getContext) {
var line = eleGet.getContext(‘2d’);
line.strokeStyle = lineColor;
line.beginPath();
for (var i = 0; i < arr.length; i++) {
for (var j = 1; j < arr.length – i; j++) {
line.moveTo(arr[i][0], arr[i][1]);
line.lineTo(arr[i + j][0], arr[i + j][1]);
}
}
line.stroke();
}
return this;
},
reDraw: function (scope, speed) {
if (!isNaN(scope) && !isNaN(speed)) {
var _this = this, eleGet = this.ele.get(0), arr = this.pointArr, newArr = arr.slice(0), aArr = [], bArr = [], step = 0;
var redraw = eleGet.getContext(‘2d’);
//变化数组
for (var i = -scope; i <= scope; i++) {
aArr.push(i);
}
aArr = aArr.concat(aArr.slice(0).reverse());
for (var i = scope; i >= -scope; i–) {
bArr.push(i);
}
bArr = bArr.concat(bArr.slice(0).reverse());
for (var i = 0; i < aArr.length; i++) {
if (aArr[i + 1] == aArr[i]) {
aArr.splice(i, 2, aArr[i]);
}
if (bArr[i + 1] == bArr[i]) {
bArr.splice(i, 2, bArr[i]);
}
};
aArr.splice(aArr.length – 1, 1);
bArr.splice(bArr.length – 1, 1);
//定时器
setInterval(function () { loop() }, speed);
function loop() {
redraw.clearRect(0, 0, _this.width, _this.height);
if (step < aArr.length – 1) {
step++;
} else {
step = 0;
};
var na = aArr[step], nb = bArr[step];
for (var i = 0; i < arr.length; i++) {
if (i % 2 == 0) {
arr.splice(i, 1, [newArr[i][0] + nb, newArr[i][1] + na]);
} else {
arr.splice(i, 1, [newArr[i][0] + na, newArr[i][1] + nb]);
}
}
_this.drawLine().drawPoint(_this.radius);
};
}
return this;
},
mouseMove: function () {
var _this = this, ele = this.ele, eleGet = ele.get(0), height = this.height, width = this.width, arr = this.pointArr;
var redraw = eleGet.getContext(‘2d’);
ele.hover(function (ev) {
var mx = ev.originalEvent.x || ev.originalEvent.layerX || 0, my = ev.originalEvent.y || ev.originalEvent.layerY || 0;
ele.mousemove(function (e) {
redraw.clearRect(0, 0, width, height);
var mxl = e.originalEvent.x || e.originalEvent.layerX || 0, myl = e.originalEvent.y || e.originalEvent.layerY || 0;
for (var i in arr) {
arr.splice(i, 1, [arr[i][0] + mxl – mx, arr[i][1] + myl – my]);
}
_this.drawLine().drawPoint(_this.radius);
mx = mxl;
my = myl;
});
}, function () {
ele.off(‘mousemove’);
});
return this;
}
}
</script>
</head>
<body>
<canvas class=”canvas” id=”canvas”>您的浏览器不支持HTML5元素，请升级您的浏览器！</canvas>
<div id=”arr”></div>
</body>
</html>
» 本文来自：前端开发者 » 《前端HTML5 CANVAS随机点线视觉3D效果》
» 本文链接地址：https://www.rokub.com/5540.html
» 您也可以订阅本站：https://www.rokub.com
近期评论