您的位置：首页 > 职场人生

谁说程序员不懂浪漫，canvas制作浪漫满屋爱心飘动

2018-01-31 15:29 597 查看

谁说程序员不懂浪漫呢，程序员只是不善言语表达而已，下面我们就来看看这浪漫满屋的代码吧。

效果知识点：面向对象开发思想 , canvas画布，随机与运动函数, canvas图片绘制 ,动量设计，this与对象, 原型与构造函数，编程规范,逻辑思维，帧动画处理与平滑动画。

源码分享之前小编推荐一下我的前端学习群：542827633，里面都是学习前端的，如果你想制作酷炫的网页，想学习前端知识，小编欢迎你的加入。小编会在群中不定期分享干货源码，包括我精心整理的一份前端教程。欢迎各位感兴趣的的小伙伴。

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>heart</title>
<style>
*{margin:0;padding:0;}
body{
background:#303035;
overflow:hidden; /*单页场景类特效 超出隐藏*/
}
</style>
</head>
<body>
<canvas></canvas>

<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>
</body>
</html>
<!--
1.获取元素
document.getElementById 只能获取用id命名的元素 单个元素

document.getElementsByClassName 只能获取用class命名的元素
元素的集合 类似数组 [ele1,ele2]
document.getElementsByTagName 只能获取哪一类标签
元素的集合 类似数组 [ele1,ele2]
H5 最新的选择器 兼容IE8
document.querySelector('.wrap p a') 类似jquery $选择器 $('.wrap p a') css选择器写法一模一样
id class tag 获取到的是唯一的 第一个
document.querySelectorAll('');  获取多个 返回一个元素节点集合
2.如何创建图片对象
3.初始化
canvas画布
获取浏览器的宽度和高度
width height
ctx.drawImage() 绘制图片 img对象 绘制开始的X坐标
绘制开始的Y坐标
4. 定时器
setInterval => bug (回调函数,100) 11-12 13-16
setTimeout 模拟 setInterval
requestAnimationFrame
h5帧动画 cpu的运行速率来的 无法手动设置时间间隔
流畅的动画
面向对象  创建爱心对象
爱心的位置 随机
爱心的透明度 随机 [0,1)~[0.5,1.5)
爱心的速度 随机
爱心的移动方向 随机
爱心的最终/目标大小 随机

爱心的行为
随机
范围 Math.random() 0 - 1 包括0不包括1

移动
慢慢变大
超出范围后消失重新定位
定时器
canvas h5 高级绘图
javascript
作用域
this 对象 运行环境上下文
移动端中touch ontouchstart

找工作
原生js一定要过关 我只会用jquery
-->

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 程序员 canvas 面向对象编程源码

相关文章推荐

新的分享

章节导航