蜂巢动画（原创）

Html

Css

* {
	margin:0;
	padding:0;
}
html,body {
	overflow:hidden;
}

let canvas = document.getElementById("canvas")
let context = canvas.getContext("2d")

let settings = {
    polygon_color: '#4a70a2',
    polygon_boder_color: '#000',
    polygon_line_long: 30,
}
let polygonArr = [],
    circleArr = [];

class polygon {
    constructor(side, center, odd) {
        this.side = side
        this.color = settings.polygon_color;
        this.boder = settings.polygon_boder_color;
        this.long = settings.polygon_line_long;
        this.center = center
        this.angle = 2 * Math.PI / side;
        this.odd = odd;
    }

draw() {
        context.beginPath();
        context.fillStyle = this.color;
        context.strokeStyle = this.boder;
        context.lineWidth = this.lineWidth;
        context.moveTo(this.center.x, this.center.y);
        for (let i = 0; i < this.side + 1; i++) {
            if (this.odd) {
                this.beginX = this.long * Math.sin(i * this.angle) + this.center.x;
            } else {
                this.beginX = this.long * Math.sin(i * this.angle) + this.center.x + settings.polygon_line_long * Math.cos(Math.PI / 6);
            }

this.beginY = this.long * Math.cos(i * this.angle) + this.center.y;
            context.lineTo(this.beginX, this.beginY)
        }
        context.fill()
        context.closePath()

}
}

class circle {
    constructor() {
        this.raduis = Math.random() * 550;
        this.color = '#ffff00';
        this.width = Math.random() * 10;
        this.blur = 14;
        this.x = Math.random() * window.innerWidth;
        this.y = Math.random() * window.innerHeight;
        this.random = Math.random() + 0.5
    }
    draw() {
        context.save()
        context.beginPath()
        context.strokeStyle = this.color
        context.shadowColor = this.color
        context.shadowBlur = this.blur
        context.lineWidth = this.width
        context.arc(this.x, this.y, this.raduis, 0, 2 * Math.PI)
        context.stroke()
        context.restore()
    }
    updata() {
        if (this.raduis > window.innerWidth || this.raduis > window.innerHeight) {
            this.x = Math.random() * window.innerWidth;
            this.y = Math.random() * window.innerHeight;
            this.raduis = 0
        }
        this.raduis += this.random
        this.draw()
    }
}
for (let i = 0; i < 66; i++) {
    circleArr.push(new circle())
}

function resize() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    init()
    requestAnimationFrame(resize)
}
window.onresize = resize;
window.onload = () => {
    resize()
}

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

立即下载

蜂巢动画（原创）

代码描述：使用canvas画出来的蜂巢背景动画

更新时间：2023-08-27 23:14:59

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

qiqi1112

相关代码

蜂巢动画（原创）

最新