星空背景 - 踏得网

canvas星空背景

h5, canvas, sky

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

class Vector3 {
    constructor(x = 0, y = 0, z = 0) {
        this.x = x;
        this.y = y;
        this.z = z;
    }

clone() {
        return new this.constructor(this.x, this.y, this.z);
    }
}

// canvas构造器
class CanvasSystem {
    constructor(id) {
        this.canvas = undefined;
        this.context = undefined;
        this.timer = undefined
        if (id) this.init(id);
    }

init(id) {
        let container = document.getElementById(id);
        this.canvas = document.createElement('canvas');
        this.canvas.width = container.clientWidth;
        this.canvas.height = container.clientHeight;
        container.appendChild(this.canvas);
        this.context = this.canvas.getContext('2d');

// 绘制点默认居中
        this.context.setTransform(1, 0, 0, 1, this.canvas.width / 2, this.canvas.height / 2);
        return this;
    }

// 绘制图形
    draw(fun) {
        fun(this.context);
    }

// 更新图形
    update(fun) {
        let self = this;
        _update();

function _update() {
            self.timer = requestAnimationFrame(_update);
            fun(self.context);
        }
    }

stop() {
        cancelAnimationFrame(this.timer);
        console.warn('cancelAnimationFrame!');
    }

clear() {
        this.context.clearRect(-this.canvas.width / 2, -this.canvas.height / 2, this.canvas.width, this.canvas.height);
    }

fillRect(fillStyle) {
        this.context.fillStyle = fillStyle;
        this.context.fillRect(-this.canvas.width / 2, -this.canvas.height / 2, this.canvas.width, this.canvas.height);
    }
}

class Star {
    constructor(x, y, z) {
        this.position = new Vector3(x, y, z);
    }

render(ctx, img, focalLength, width) {
        // 扁平化x,y
        let posX = this.position.x * (focalLength / this.position.z);
        let posY = this.position.y * (focalLength / this.position.z);
        let radius = 10 * (focalLength / this.position.z);

ctx.drawImage(img, posX, posY, radius, radius);

this.position.z -= 3;
        if (this.position.z <= 0) this.position.z = width;
    }
}

let cs = new CanvasSystem('container');
let canvas = cs.canvas;
let starNum = 300,
    stars = [];
let focalLength = canvas.width * 0.5;
let img = new Image();
img.src = 'https://hafly.github.io/resources/CodePen/2018-11-23/star.png';

for (let i = 0; i < starNum; i++) {
    let star = new Star(Math.random() * canvas.width - canvas.width / 2, Math.random() * canvas.height - canvas.height / 2, Math.random() * canvas.width);
    stars.push(star);
}

cs.update((ctx) => {
    cs.clear();
    cs.fillRect('rgba(0,0,0,1)');

for (let i = 0; i < stars.length; i++) {
        stars[i].render(ctx, img, focalLength, canvas.width);
    }
});

编译

CSS

HTML

canvas星空背景

h5, canvas, sky

编辑器支持Emmet

快捷键

canvas星空背景

h5, canvas, sky

全屏三角形帷幔飘摇和星空背景动画

three.js添加场景背景和天空盒（skybox）代码示例3

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：