前端开发仿QQ登录界面效果

前端比较好的开发工具

web 前端开发工具排名

前端开发工具选择

html 代码

<!DOCTYPE html>

<html>

<head>

<title>lowpoly</title>

<style>

html,

body {

margin: 0;

padding: 0;

}

</style>

</head>

<body>

Your browser does not support the canvas element.

</canvas>

window.onload = function () {

function myLowPoly(ele) {

this.canvas = document.getElementById(ele);

this.range = 100;

this.width = this.canvas.width;

this.height = this.canvas.height;

this.standard = { x: Math.floor(this.canvas.width / 2), y: Math.floor(this.canvas.height / 2) };

this.start = parseInt(“ADE0FF”, 16);

this.end = parseInt(“000000”, 16);

this.colorRange = this.start – this.end;

var colums = Math.floor(this.width / this.range) + 1;

var rows = Math.floor(this.height / this.range) + 1;

this.dotArr = [];

for (var i = 0; i < rows; i++) {

this.dotArr[i] = [];

for (var j = 0; j < colums; j++) {

var speedX, speedY;

if (j == 0) {

var x = 0;

speedX = 0;

} else if (j == colums – 1) {

var x = this.width;

speedX = 0;

} else {

var x = Math.random() * this.range – this.range / 2 + j * this.range;

speedX = (Math.random() >= 0.5) ? 1 : -1;

}

if (i == 0) {

var y = 0;

speedY = 0;

} else if (i == rows – 1) {

var y = this.height;

speedY = 0;

} else {

var y = Math.random() * this.range – this.range / 2 + i * this.range;

speedY = (Math.random() >= 0.5) ? 1 : -1;

}

//var x = Math.random()*this.range – this.range/2 + (j-1)*this.range;

//var y = Math.random()*this.range – this.range/2 + (i-1)*this.range;

//var speedX = (Math.random() >=0.5)?1:-1;

//var speedY = (Math.random() >=0.5)?1:-1;

this.dotArr[i][j] = { x: x, y: y, speedX: speedX, speedY: speedY };

}

this.render();

this.mouse();

var _this = this;

setInterval(function () { _this.render() }, 60);

}

myLowPoly.prototype.mouse = function () {

var _this = this;

this.canvas.onmousemove = function (e) {

var bbox = _this.canvas.getBoundingClientRect();

var x = e.clientX – bbox.left * (_this.canvas.width / bbox.width);

var y = e.clientY – bbox.top * (_this.canvas.height / bbox.height);

_this.standard = { x: x, y: y };

}

myLowPoly.prototype.getColor = function (data) {

var center = {};

center.x = (data[0].x + data[1].x + data[2].x) / 3;

center.y = (data[0].y + data[1].y + data[2].y) / 3;

var a = 1 + Math.pow(16, 2) + Math.pow(16, 4);

var s = Math.floor(Math.sqrt(Math.pow(Math.abs(center.x – this.standard.x), 2) + Math.pow(Math.abs(center.y – this.standard.y), 2)));//计算三角形中点到指定位置的距离

s = Math.floor(s / 4) * a;

if (s > this.colorRange) { s = this.colorRange; }

var color = this.start – s;

return “#” + (“000000” + color.toString(16)).slice(-6);

}

myLowPoly.prototype.paint = function (data) {

var c = this.canvas;

var cxt = c.getContext(“2d”);

cxt.beginPath();

cxt.moveTo(data[0].x, data[0].y);

cxt.lineTo(data[1].x, data[1].y);

cxt.lineTo(data[2].x, data[2].y);

cxt.closePath();

cxt.fillStyle = this.getColor(data);

cxt.strokeStyle = this.getColor(data);

cxt.stroke();

cxt.fill();

}

myLowPoly.prototype.draw = function () {

for (var i = 0; i < this.dotArr.length – 1; i++) {

for (var j = 0; j < this.dotArr[i].length – 1; j++) {

var data = [this.dotArr[i][j], this.dotArr[i + 1][j], this.dotArr[i + 1][j + 1]];

this.paint(data);

if (j != this.dotArr[i].length – 1) {

var data = [this.dotArr[i][j], this.dotArr[i + 1][j + 1], this.dotArr[i][j + 1]];

this.paint(data);

}

myLowPoly.prototype.change = function () {

for (var i = 0; i < this.dotArr.length; i++) {

for (var j = 0; j < this.dotArr[i].length; j++) {

var data = this.dotArr[i][j];

if (data.speedX != 0) {

data.x = data.x + data.speedX;

}

if (data.speedY != 0) {

data.y = data.y + data.speedY;

}

var maxX = this.range / 2 + j * this.range,

minX = 0 – this.range / 2 + j * this.range,

maxY = this.range / 2 + i * this.range,

minY = 0 – this.range / 2 + i * this.range;

if (data.x > maxX || data.x < minX) { data.speedX = 0 – data.speedX; }

if (data.y > maxY || data.y < minY) { data.speedY = 0 – data.speedY; }

}

myLowPoly.prototype.render = function () {

this.change();

this.draw();

}

new myLowPoly(“myCanvas”);

}

</script>

</body>

</html>

网页前端开发工具排行

前端开发工具dream

前端开发工具2017

前端开发仿QQ登录界面效果

前端开发者

相关推荐

评论抢沙发

评论前必须登录！

最新评论

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

最新评论

评论抢沙发