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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_39345165/article/details/79217840


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

效果知识点:面向对象开发思想 , 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
-->


阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页