pixi.js 渐变色雪花背景效果

pixi.js支持多种渲染器，包括webgl和canvas2d。

pixi.js

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 4990
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer`
// which will try to choose the best renderer for the environment you are in.
var renderer = new PIXI.autoDetectRenderer(800, 600, {
    antialias: true
});

// The renderer will create a canvas element for you that you can then insert into the DOM.
document.body.appendChild(renderer.view);

// You need to create a root container that will hold the scene you want to draw.
var stage = new PIXI.Container();

stage.interactive = true;

var squares = [];

function byte2Hex(n) {
    var nybHexString = "0123456789ABCDEF";
    return String(nybHexString.substr((n >> 4) & 0x0F, 1)) + nybHexString.substr(n & 0x0F, 1);
}

function addSquare(x, y) {

var graphics = new PIXI.Graphics();

var colour = '0x' + byte2Hex(x * 80 / 255) + byte2Hex(y * 100 / 255) + byte2Hex((x / y) * 80 / 255);

// set a fill and line style
    graphics.beginFill(colour);
    graphics.lineStyle(1, colour, 1);
    //   graphics.lineStyle(0, 0xffd900, 1);

// draw a shape;

var size = Math.random() * 1 + 7;

graphics.moveTo(-size / 2, -size / 2);
    graphics.lineTo(size / 2, -size / 2);
    graphics.lineTo(size / 2, size / 2);
    graphics.lineTo(-size / 2, size / 2);
    graphics.lineTo(-size / 2, -size / 2);
    graphics.endFill();

stage.addChild(graphics);

graphics.position.x = x;
    graphics.position.y = y;
    return graphics;
}

for (var i = 0; i < 60; i++) {
    squares[i] = [];
    for (var j = 0; j < 80; j++) {
        squares[i][j] = addSquare(j * 10, i * 10);

console.log('quares[i][j] = ' + squares[i][j])
    }
}

animate();

function animate() {
    // start the timer for the next animation loop
    requestAnimationFrame(animate);

for (var i = 0; i < 60; i++) {
        for (var j = 0; j < 80; j++) {
            squares[i][j].rotation += 0.1 * (40 - j) / (30.001 - i) / (j + i); //Math.random();
            squares[i][j].scale = new PIXI.Point(Math.random() * 0.5 + 0.5, Math.random() * 0.5 + 0.5);
        }
    }

// this is the main render call that makes pixi draw your container and its children.
    renderer.render(stage);
}

编译

CSS

HTML

pixi.js支持多种渲染器，包括webgl和canvas2d。

pixi.js

编辑器支持Emmet

快捷键

pixi.js支持多种渲染器，包括webgl和canvas2d。

pixi.js

Pixi.js使用着色器（shader）代码实现的超炫烟雾特效

PIXI.JS 椭圆图形动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：