爱心冲击，表白代码

Html

Css

body,html {
	overflow:hidden;
}

var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")

function onResize() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}
window.onresize = onResize;

if (this.firstActive < this.firstFree) {
            for (i = this.firstActive; i < this.firstFree; i++)
                this.particles[i].updata(deltaTime);
        }
        if (this.firstFree < this.firstActive) {
            for (i = this.firstActive; i < this.particles.length; i++)
                this.particles[i].updata(deltaTime);
            for (i = 0; i < this.firstFree; i++)
                this.particles[i].updata(deltaTime);
        }

while (this.particles[this.firstActive].age >= this.duration && this.firstActive != this.firstFree) {
            this.firstActive++;
            if (this.firstActive == this.particles.length) this.firstActive = 0;
        }
    }
    draw(ctx, image) {
        if (this.firstActive < this.firstFree) {
            for (let i = this.firstActive; i < this.firstFree; i++)
                this.particles[i].draw(ctx, image);
        }
        if (this.firstFree < this.firstActive) {
            for (let i = this.firstActive; i < this.particles.length; i++)
                this.particles[i].draw(ctx, image);
            for (let i = 0; i < this.firstFree; i++)
                this.particles[i].draw(ctx, image);
        }
    }
}
// 星星运动轨迹
function length(dir, length) {
    let lx = ''
    let ly = JSON.parse(JSON.stringify(dir))
    lx = Math.sqrt(ly.x * ly.x + ly.y * ly.y);
    ly.x /= lx * length
    ly.y /= lx * length
    return ly;
}
//星星的XY轴关系
function pointOnHeart(t) {
    return new bagainPoint(
        160 * Math.pow(Math.sin(t), 3),
        130 * Math.cos(t) - 50 * Math.cos(2 * t) - 20 * Math.cos(3 * t) - 10 * Math.cos(4 * t) + 25
    );
}
// 先画一个小星星
var image = (function() {
    var canvas = document.createElement('canvas'),
        context = canvas.getContext('2d');
    canvas.width = settings.particles.size;
    canvas.height = settings.particles.size;
    // Helper函数来创建路径
    function to(t) {
        var point = pointOnHeart(t);
        point.x = settings.particles.size / 2 + point.x * settings.particles.size / 350;
        point.y = settings.particles.size / 2 - point.y * settings.particles.size / 350;
        return point;
    }
    // 创建路径
    context.beginPath();
    var t = -Math.PI;
    var point = to(t);
    context.moveTo(point.x, point.y);
    while (t < Math.PI) {
        t += 0.01; // baby steps!
        point = to(t);
        context.lineTo(point.x, point.y);
    }
    context.closePath();
    // 创建填充
    context.fillStyle = '#ea80b0';
    context.fill();
    // 创建图片
    var image = new Image();
    image.src = canvas.toDataURL();
    return image;
})()
var particles = new PointPool(settings.particles.length)

function render() {
    requestAnimationFrame(render);
    var newTime = new Date().getTime() / 1000,
        deltaTime = newTime - (time || newTime);
    time = newTime;

ctx.clearRect(0, 0, canvas.width, canvas.height);

var amount = particleRate * deltaTime;
    for (var i = 0; i < amount; i++) {
        var pos = pointOnHeart(Math.PI - 2 * Math.PI * Math.random());
        var dir = pos.clone().length(settings.particles.velocity);
        particles.add(canvas.width / 2 + pos.x, canvas.height / 2 - pos.y, dir.x, -dir.y);
    }
    particles.updata(deltaTime);
    particles.draw();
}
window.onload = function() {
    onResize()
    render()
}

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

立即下载

爱心冲击，表白代码



代码描述：点燃我，温暖你，canvas爱心代码

更新时间：2022-11-13 22:46:36

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

qiqi1112

相关代码

爱心冲击，表白代码

最新