web前端群，189394454，有视频、源码、学习方法等大量干货分享
谁说程序员不懂浪漫呢，程序员只是不善言语表达而已，下面我们就来看看这浪漫满屋的代码吧。
效果知识点：面向对象开发思想 , canvas画布 ，随机与运动函数, canvas图片绘制 ,动量设计，this与对象, 原型与构造函数 ，编程规范,逻辑思维，帧动画处理与平滑动画。
👇css代码：
<style>
*{margin:0;padding:0;}
body{
background:#303035;
overflow:hidden; /*单页场景类特效 超出隐藏*/
}
</style>
👇javascript代码：
<script>
var canvas = document.querySelector('canvas'); //获取canvas元素
var ctx = canvas.getContext('2d'); //创建canvas画布
var wW = window.innerWidth; //获取浏览器宽度 screen.width
var wH = window.innerHeight;
var num = 100;// 绘制100个红心 100个红心对象
var hearts=[]; //数组 心的集合
var heartImage = new Image();// 创建一个新的image对象
heartImage.src='images/heart.svg'; // 改变路径
heartImage.onload = init; // 当图片加载完成之后渲染
init(); //运行初始化函数
function init(){ //创建一个函数(方法)
//初始化画布的大小
canvas.width = wW;
canvas.height = wH;
for(var i=0;i<num;i++){
hearts[i]=new Heart();
}
requestAnimationFrame(render);
window.addEventListener('resize',function(){
wW = window.innerWidth; //获取浏览器宽度 screen.width
wH = window.innerHeight;
})
}
function Heart(){ //构造函数 首字母大写
this.x = Math.random()*wW;//初始化生成范围为浏览器宽度
this.y = Math.random()*wH;
this.opacity = Math.random()*.5+.5; //[0.5+0.1-0.5]
this.vel = { //位移参数 移动量和方向
x: (Math.random()-.5)*4, // 0-.5=-.5 1-0.5 = 0.5 -值往左走 ﹢值往右走
y: (Math.random()-.5)*4 //速度系数
}
this.initialW = 470; //基准宽度
this.initialH = 410; //基准高度
// 最终大小缩放比例targetScale 最小为0.02
this.targetScale= Math.random()*.15 +.02;
// 初始化的时候大小缩放比例scale
this.scale = this.targetScale*Math.random();
}
Heart.prototype.update = function(){//更新方法
this.x += this.vel.x; // 改变心的x方向位置 10 10.5
this.y += this.vel.y;
if(this.x - this.width > wW || this.x + this.width < 0 ){
this.scale = 0; //重置缩放值
this.x = Math.random()*wW; //从新初始化x方向位置
}
if(this.y - this.height > wH || this.y + this.height < 0){
this.scale = 0; //重置缩放值
this.y = Math.random()*wH; //从新初始化x方向位置
}
this.scale += (this.targetScale-this.scale)*.01;
// 当前大小 = 目标大小 - 当前大小
// 0.3 = 0.3+(( 0.8 - 0.3 )* 0.01); 0.005+0.3 0.305
// 0.8 = 0.8 + (0.8-0.8) *0.01;
this.width = this.scale*this.initialW;
this.height =this.scale*this.initialH;
}
Heart.prototype.draw = function(){ //绘制方法 原型方法
ctx.globalAlpha = this.opacity; //红心透明度
ctx.drawImage(heartImage,this.x,this.y,this.width,this.height);
}
function render(){//渲染函数
ctx.clearRect(0,0,wW,wH);// 清空画布
for(var i=0;i<num;i++){
hearts[i].draw(); //对象的绘制方法
hearts[i].update(); //每隔13毫秒重新绘制爱心坐标
}
requestAnimationFrame(render); //每隔13毫秒 调用一次render
}
function module(){ //修改内部作用域变量
var person=[
{
'name':'海牙',
'age':13,
'job':'前端工程师'
},
{
'name':'阿飞',
'age':3,
'job':'架构师'
}
]
var index=0;
function mySelect(item){
for(var i=0,len=person.length;i<len;i++){
if(person[i]['name']== item){
index = i;
return i;
}
}
}
function myUpdate(index,key,val){
person[index][key] = val;
}
return {
set:function(item,key,val){
myUpdate(mySelect(item),key,val);
},
get:function(){
return person[index];
}
}
}
var nmodule = module(); // json 对象
nmodule.set('阿飞','age',2);
console.log(nmodule.get())
//console.log(numX);
// 词法作用域 IIFE 变量声明提升
</script>
网友评论