canvas 标签云

canvas 标签云

by pleasureswx123

HTML

<canvas id='canvas' width=500 height=500 style='background-color:rgb(0,0,0)'>
    This browser does not support html5.
</canvas>

CSS

body {
    background:#000;
}

JavaScript

(function () {
    function Garden(canvas, vpx, vpy) {
        this.canvas = canvas;
        this.ctx = this.canvas.getContext('2d');

        // 三维系在二维上的原点
        this.vpx = vpx === undefined ? 250 : vpx;
        this.vpy = vpy === undefined ? 250 : vpy;
        this.balls = [];
        this.angleY = 0;
        this.angleX = 0;
    }

    Garden.prototype = {
        createBall: function (x, y, z) {
            this.balls.push(new Ball(this, x, y, z));
        },
        render: function () {
            this.ctx.clearRect(0, 0, 500, 500)
            this.balls.sort(function (a, b) {
                return b.z - a.z
            });
            for (var i = 0; i < this.balls.length; i++) {
                this.balls[i].rotateY();
                this.balls[i].rotateX();
                this.balls[i].draw();
            }
        }
    };

    function Ball(garden, x, y, z, angleX, angleY, ballR) {
        this.garden = garden;

        // 三维下坐标
        this.x = x === undefined ? Math.random() * 200 - 100 : x;
        this.y = y === undefined ? Math.random() * 200 - 100 : y;
        this.z = z === undefined ? Math.random() * 200 - 100 : z;

        this.r = Math.floor(Math.random() * 255);
        this.g = Math.floor(Math.random() * 255);
        this.b = Math.floor(Math.random() * 255);

        this.fontSize = (10 + 10 * Math.random());

        this.angleX = 0;
        // this.angleX = angleX || Math.PI / 200;

        this.angleY = angleY === undefined ? Math.PI / 100 : angleY;

        // 三维上半径
        this.ballR = 1;

        // 二维上半径
        this.radius = undefined;

        // 二维上坐标
        this.x2 = undefined;
        this.y2 = undefined;
    }


    Ball.prototype = {
        // 绕y轴变化，得出新的x，z坐标
        rotateY: function () {
            var cosy = Math.cos(this.garden.angleY);
            var siny = Math.sin(this.garden.angleY);
            var x1 = this.z * siny + this.x * cosy;
            var z1 = this.z * cosy - this.x * siny;

            this.x =...