简易星空图（含鼠标事件）

Html

Css

"use strict"
var Num = 80;
var points = [];
var c = $('#c').get(0);
var ctx = c.getContext('2d');
var w = c.width = window.innerWidth;
var h = c.height = window.innerHeight;
var point = function() {
    this.x = Math.random() * w;
    this.y = Math.random() * h;
    this.color = Math.random() * 360;
    this.count = 5;
    this.mindis = 80;
    this.speedx = Math.random() * 2 - 1;
    this.speedy = Math.random() * 2 - 1;
    //this.bound=false;
}
point.prototype.constructor = point;
point.prototype.lineTo = function(points) {
    ctx.beginPath();
    for (var i in points) {
        var dis = Math.sqrt(Math.pow((this.x - points[i].x), 2) + Math.pow((this.y - points[i].y), 2));
        if (this.count > 0 && points[i].count > 0 && dis < this.mindis) {
            var grd = ctx.createLinearGradient(this.x, this.y, points[i].x, points[i].y);
            var o = dis * 0.8 / this.mindis + 0.2;
            grd.addColorStop(0, "hsla(" + this.color + ",100%,50%," + o + ")");
            grd.addColorStop(1, "hsla(" + points[i].color + ",100%,50%," + o + ")");
            ctx.strokeStyle = grd;
            ctx.moveTo(this.x, this.y);
            ctx.lineTo(points[i].x, points[i].y);
            ctx.stroke();
            this.count--;
            points[i].count--;
        }
    }
    ctx.closePath();
};

point.prototype.mouse = function(mousex, mousey) {

var dx = (this.x - mousex);
    var dy = (this.y - mousey);
    var dis = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
    if (dis < 100 && dis > 60) {
        dx > 0 ? this.x -= 10 : this.x += 10;
        dy > 0 ? this.y -= 10 : this.y += 10;
    } else if (dis < 80) {
        this.count = 10;
    }

}
point.prototype.init = function() {

this.x += this.speedx;
    this.y += this.speedy;
    this.count = 6;
};
point.prototype.isBound = function() {

if (this.x < 0 || this.x > w) {
        //this.bound=true;
        this.speedx = -this.speedx;

} else if (this.y < 0 || this.y > h) {
        this.speedy = -this.speedy;
    }
};

(function createPoints() {
    for (var i = 0; i < Num; i++) {
        points.push(new point());
    }
})();

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

简易星空图（含鼠标事件）

代码描述：canvas 星空图

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

师寇Dill

相关代码

简易星空图（含鼠标事件）

最新