【爱心弹幕----使用HTML+CSS+JS等实现（效果+源码_【html+css+js】爱心代码自定义生成文字

// 初始化画布大小

function init(){

canvas.width = wW;

canvas.height = wH;

for(var i = 0; i < num; i++){

hearts.push(new Heart(i%5));

}

requestAnimationFrame(render);

}

function getColor(){

var val = Math.random() * 10;

if(val > 0 && val <= 1){

return ‘#00f’;

} else if(val > 1 && val <= 2){

return ‘#f00’;

} else if(val > 2 && val <= 3){

return ‘#0f0’;

} else if(val > 3 && val <= 4){

return ‘#368’;

} else if(val > 4 && val <= 5){

return ‘#666’;

} else if(val > 5 && val <= 6){

return ‘#333’;

} else if(val > 6 && val <= 7){

return ‘#f50’;

} else if(val > 7 && val <= 8){

return ‘#e96d5b’;

} else if(val > 8 && val <= 9){

return ‘#5be9e9’;

} else {

return ‘#d41d50’;

}

}

function getText(){

var val = Math.random() * 10;

if(val > 1 && val <= 3){

return ‘爱你一辈子’;

} else if(val > 3 && val <= 5){

return ‘感谢你’;

} else if(val > 5 && val <= 8){

return ‘喜欢你’;

} else{

return ‘I Love You’;

}

}

function Heart(type){

this.type = type;

// 初始化生成范围

this.x = Math.random() * wW;

this.y = Math.random() * wH;

this.opacity = Math.random() * .5 + .5;

// 偏移量

this.vel = {

x: (Math.random() - .5) * 5,

y: (Math.random() - .5) * 5

}

this.initialW = wW * .5;

this.initialH = wH * .5;

// 缩放比例

this.targetScale = Math.random() * .15 + .02; // 最小0.02

this.scale = Math.random() * this.targetScale;

// 文字位置

this.fx = Math.random() * wW;

this.fy = Math.random() * wH;

this.fs = Math.random() * 10;

this.text = getText();

this.fvel = {

x: (Math.random() - .5) * 5,

y: (Math.random() - .5) * 5,

f: (Math.random() - .5) * 2

}

}

Heart.prototype.draw = function(){

ctx.save();

ctx.globalAlpha = this.opacity;

ctx.drawImage(heartImage, this.x, this.y, this.width, this.height);

ctx.scale(this.scale + 1, this.scale + 1);

if(!this.type){

// 设置文字属性

ctx.fillStyle = getColor();

ctx.font = 'italic ’ + this.fs + ‘px sans-serif’;

// 填充字符串

ctx.fillText(this.text, this.fx, this.fy);

}

ctx.restore();

}

Heart.prototype.update = function(){

this.x += this.vel.x;

this.y += this.vel.y;

if(this.x - this.width > wW || this.x + this.width < 0){

// 重新初始化位置

this.scale = 0;

this.x = Math.random() * wW;

this.y = Math.random() * wH;

}

if(this.y - this.height > wH || this.y + this.height < 0){

// 重新初始化位置

this.scale = 0;

this.x = Math.random() * wW;

this.y = Math.random() * wH;

}

// 放大

this.scale += (this.targetScale - this.scale) * .1;

this.height = this.scale * this.initialH;

this.width = this.height * 1.4;

总结

我们总是喜欢瞻仰大厂的大神们，但实际上大神也不过凡人，与菜鸟程序员相比，也就多花了几分心思，如果你再不努力，差距也只会越来越大。

面试题多多少少对于你接下来所要做的事肯定有点帮助，但我更希望你能透过面试题去总结自己的不足，以提高自己核心技术竞争力。每一次面试经历都是对你技术的扫盲，面试后的复盘总结效果是极好的！

• 1.4;

总结

我们总是喜欢瞻仰大厂的大神们，但实际上大神也不过凡人，与菜鸟程序员相比，也就多花了几分心思，如果你再不努力，差距也只会越来越大。

面试题多多少少对于你接下来所要做的事肯定有点帮助，但我更希望你能透过面试题去总结自己的不足，以提高自己核心技术竞争力。每一次面试经历都是对你技术的扫盲，面试后的复盘总结效果是极好的！

[外链图片转存中…(img-J3sCLIra-1714531965098)]

本文已被CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录