H5小动画，分享一下！！

最新推荐文章于 2024-02-15 09:15:57 发布

X月亮代表我的心

最新推荐文章于 2024-02-15 09:15:57 发布

阅读量1.7k

点赞数

分类专栏： H5

本文链接：https://blog.csdn.net/xiaokangmemeda/article/details/49934829

版权

H5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
	<html>
	<head>
	<title> new document </title>
	<meta charset="utf-8"/>

	</head>

	<body >
	<script>
	var bd=document.getElementsByTagName('body')[0];
	var canvas=document.createElement('canvas');
	bd.appendChild(canvas);
	var context=canvas.getContext('2d');
	canvas.width=window.innerWidth;
	canvas.height=window.innerHeight;
	//定义彩球的构造器
	function circle(){
	this.x=Math.random()*canvas.width;
	this.y=canvas.height;
	this.r1=Math.random()*10+1;
	this.r2=parseInt(Math.random()*256);
	this.g=parseInt(Math.random()*256);
	this.b=parseInt(Math.random()*256);
	this.paint=function(){
	if(this.y<canvas.height/2-50){


	context.strokeStyle='#69b6b1';
	context.lineWidth=.2;
	context.beginPath();
	context.arc(this.x,this.y,this.r1,0,Math.PI*2);
	context.stroke()
	}else if(this.y<canvas.height/2){
	context.fillStyle='#69b6b1';
	context.lineWidth=.2;
	context.beginPath();
	context.arc(this.x,this.y,this.r1,0,Math.PI*2);
	context.fill()




	}else{
	context.fillStyle='rgb('+this.r2+','+this.g+','+this.b+')';
	context.beginPath();
	context.arc(this.x,this.y,this.r1,0,Math.PI*2);
	context.fill()}
	};
	this.step=function(){

	this.y--;



	}
	}
	var circles=[];
	var time=0;//控制数量;
	//定义所有彩球的绘制方法和移动
	function createCircles(){
	time++;
	if(time%10==0){
	circles.push(new circle())
	}
	for(var i=0,l=circles.length;i<l;i++){
	circles[i].paint();
	circles[i].step();
	}
	}
	//优化性能删除画布外面的圈圈
	function deleteCircles(){
	for(var i=0,l=circles.length;i<l;i++){
	if(this.y<0){
	circles.splice(i,1)
	}

	}

	}
	//核心定时器
	var img=new Image();
	img.src='bg.jpg'//这里图片路径
	var timer=setInterval(function(){
	context.drawImage(img,0,0,canvas.width,canvas.height)
	createCircles()
	deleteCircles()


	},10)



	</script>
	</body>
	</html> //气泡在背景图中上升到消失代码中不插入图片看不到效果

X月亮代表我的心

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5小动画，分享一下！！

new document charset="utf-8"/> var bd=document.getElementsByTagName('body')[0]; var canvas=document.createElement('canvas');
复制链接

扫一扫