canvas粒子线

Html

Css

body,html {
	overflow:hidden;
	background-color:antiquewhite;
}

var canvas = document.getElementById("canvas")
var ctx = canvas.getContext('2d')
canvas.width = window.innerWidth
canvas.height = window.innerHeight

// 100*100范围类的粒子数
var cloumn = parseInt(canvas.width / 100 * canvas.height / 100)
// 封装类，有画与更新功能
class particle {
    constructor(x, y, addX, addY) {
        this.x = x;
        this.y = y;
        this.addX = 0.5 - Math.random();
        this.addY = 0.5 - Math.random();
    }
    draw() {
        ctx.beginPath()
        ctx.fillStyle = 'red'
        ctx.arc(this.x, this.y, 1, 0, Math.PI * 2)
        ctx.fill()
    }
    updata() {
        this.x += this.addX
        this.y += this.addY
    }
}
var particleArr = []

function addParticle() {
    var x = Math.random() * canvas.width
    var y = Math.random() * canvas.height
    particleArr.push(new particle(x, y))
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    if (particleArr.length < cloumn) {
        addParticle()
    }
    creatParticle()
    requestAnimationFrame(draw)
}
draw()

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

立即下载

canvas粒子线



代码描述：简单实现网站的背景粒子线

更新时间：2022-10-23 21:38:20

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

qiqi1112

相关代码

canvas粒子线

最新