canvas漂浮动画

最新推荐文章于 2021-09-29 08:40:09 发布
最新推荐文章于 2021-09-29 08:40:09 发布
阅读量1.2k 收藏 3
点赞数 2
分类专栏： Web前台demo小记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MOONCOM/article/details/78589980
版权

代码如下:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>canvas漂浮动画</title>
	<style>
	body{
		margin:0px;
	}
	canvas{
		display:block;
	}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<script>
	var canHeight=0;	//画布的宽度
	var canWidth=0;		//画布的长度
	var canvas=null;	//画布对象CanvasRenderingContextD
	var mouseTop=0;		//鼠标的实时纵坐标
	var mouseLeft=0;	//鼠标的实时横坐标
	var bubbleArray=[];	//使用数组储存所有的球球对象

	/*初始化画布,使画布的大小充满整个页面*/
	(function(){
		canHeight=window.innerHeight;
		canWidth=window.innerWidth;
		canvas=document.getElementById("canvas").getContext("2d");
		document.getElementById("canvas").height=canHeight;
		document.getElementById("canvas").width=canWidth;
		canvas.fillStyle="#ff0";
		canvas.fillRect(0,0,canWidth,canHeight);
		canvas.fill();
		window.οnresize=arguments.callee;	/*画布大小随窗口的变化而变化*/
	})();

	/*随机数函数*/
	function random(min,max){
		return Math.floor(Math.random()*max+min);
	}

	/*球的对象,拥有初始化init,绘画draw,移动move方法*/
	function Bubble(){}
	Bubble.prototype={
		"init":function(){
			this.x=random(0,canWidth);
			this.y=random(0,canHeight);
			var colorArray=["#58D3F7","#40FF00","#FFFF00","#FF00FF","#FF4000"];
			this.color=colorArray[random(0,5)];
			this.vx=random(-1,3);
			this.vy=random(-1,3);
			this.r=random(1,5);
			this.prer=this.r;
			this.vr=2;
			this.maxr=50;
		},
		"draw":function(){
			canvas.beginPath();
			canvas.fillStyle=this.color;
			canvas.arc(this.x,this.y,this.r,0,Math.PI*2);
			canvas.fill();
		},
		"move":function(){
			this.x=this.x+this.vx;
			this.y=this.y+this.vy;
			if((this.x<=this.r)||(this.x+this.r>=canWidth)){
				this.vx=-this.vx;
			}
			if((this.y<=this.r)||(this.y+this.r>=canHeight)){
				this.vy=-this.vy;
			}

			/*鼠标66范围内,球球变大;超出66范围,球球变小*/
			var inVertical=Math.abs(this.y-mouseTop);      //垂直
			var inHorizontal=Math.abs(this.x-mouseLeft);    //水平
			if((this.r<this.maxr)&&(inVertical<66)&&(inHorizontal<66)){
				this.r+=this.vr;
			}
			if((this.r>this.prer)&&((inVertical>66)||(inHorizontal>66))){
				this.r-=this.vr;
			}

			this.draw();
		},
	};

	/*创造球球的函数*/
	function create(){
		var bubble=new Bubble();
		bubble.init();
		bubble.draw();
		bubbleArray.push(bubble);
	}

	/*循环生成666个球球*/
	for(var i=0;i<666;i++){
		create();
	}

	/*使用计时器控制球球的动态效果*/
	setInterval(function(){
		canvas.clearRect(0,0,canWidth,canHeight);
		for(var item of bubbleArray){
			item.move();
		}
	},1000/30);

	/*获取鼠标的实时纵横坐标位置*/
	document.body.addEventListener("mousemove",function(e){
		mouseTop=e.clientY;
		mouseLeft=e.clientX;
		console.log(mouseTop+":"+mouseLeft);
	});

	</script>
</body>
</html>
效果图:



知识点:

1, 获取窗口大小   window.innerHeight  window.innerWidth

2, canvas是行内元素，存在行高的问题，要设display:block;

3, clearRect()清除后,需要beginPath(); 否则原来的内容不会清除

霜月枫桥
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
鼠标在canvas上悬浮，并提示鼠标位置信息
11-24
鼠标在canvas上移动，显示鼠标位置
致敬六一：js+canvas实现页面卡通人物屏幕上飘动
前端-尔嵘
06-02 540
实现js+canvas实现页面卡通人物屏幕上飘动的全部代码
canvas绘制碰撞球动画
systempause的博客
03-09 509
碰撞球动画 画一个简单的球 通过选择器获取画布。 var canvas = document.getElementById('canvas');或var canvas = document.querySelector('#canvas') 获取屏幕宽高，设置画布宽高为屏幕宽高，背景色。当浏览器宽高变化时重新给canvas元素设置宽高。 出现问题：1. 页面出现滚动条。 2. 宽高只...
canvas画布漂浮动画
ClearLoveQ的博客
07-03 525
直接上代码，简单 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CanvasLove</title> <style> #canvas{ background-color: #000000; } &lt...
使用canvas实现雪花飘动效果
weixin_43633329的博客
03-17 3934
文章目录前言一、canvas是什么？二、canvas的基本用法1.创建一个画布（Canvas）2.使用JavaScript绘制图像3.Canvas 坐标4.Canvas - 路径三、实现雪花飘动的思路1.创建一个画布（Canvas）2.创建雪花的对象数组3.绘制雪花样式4.实现雪花飘动5.设置刷新6.完整代码总结 前言 四周山上的层层的松枝，戴着白绒般的很厚的雪，沉沉下垂，不时的掉下一两片手掌大的雪块，无声的堆在雪地上——冰心《寄小读者》 今天我们就使用canvas来实现雪花飘落的效果❄️ 一、ca
java小程序飘落雪花,canvas实现雪花随机动态飘落效果
weixin_34921325的博客
03-12 273
Documentbody{margin: 0;padding: 0;}canvas{background: #000;}var canvas = document.getElementById('snow');var context = canvas.getContext('2d');// 获得可视区的宽高canvas.width = window.innerWidth;canvas.height...
php漂浮雪花,canvas实现雪花随机动态飘落效果（代码示例）
weixin_42162171的博客
03-11 323
本篇文章给大家介绍一下使用canvas实现雪花随机动态飘落效果的方法，文中示例代码介绍的非常详细。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。用canvas实现雪花随机动态飘落，代码如下Document《script》var canvas = document.getElementById('snow');var context = canvas.getContext('2d'...
原生JS Canvas 粒子漂浮 效果 （详细注释）
lixuetaowade的博客
06-26 1061
其实用Canvas 实现粒子效果很简单。 知道 Canvas 怎么画出 圆形（ arc 函数 ）， 圆形的移动就是 arc 函数 定位参数变化的问题。 // x、y 变化 并且 每帧重绘 ，让我们看 圆形 像是 动起来了 context.arc(x,y,r,sAngle,eAngle,counterclockwise); //获取 页面上 canvas 标签 v...
canvas蒲公英漂浮网页动画
ICode联盟
09-29 144
下载地址 canvas实现的蒲公英漂浮网页动画，可以当做网页动态背景使用。 dd:
canvas 悬浮效果
weixin_30443731的博客
05-15 1030
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <canvas id="bubble">&...
div悬浮在canvas上
11-24
div悬浮在canvas之上
漂浮动画效果
12-24
站在巨人肩膀上，实现了一个类似小球漂浮，下雪效果的动画，在手机屏幕上左右上下，斜方向飘动
HTML5 Canvas泡泡悬浮鼠标特效.zip
07-05
HTML5 Canvas泡泡悬浮鼠标特效是一款鼠标滑过泡沫动画特效下载。
html5 canvas线条下落动画特效特效代码
03-20
html5 canvas线条下落动画特效是一款跟下雨有点相似的线条下落动画效果。
Canvas爱心气球漂浮动画特效
07-24
Canvas爱心气球漂浮动画特效是一款three基于canvas绘制的七夕情人节主题爱心气球升空动画特效。
Canvas爱心气球漂浮动画特效.zip
最新发布
10-09
非常实用的特效代码，可以完美运行，可以二次修改！
Canvas交互式三角形动画特效特效代码
03-20
Canvas交互式三角形动画特效是一款基于canvas画布绘制鼠标滑过玻璃破碎三角形翻转背景动画特效。
HTML5 Canvas粒子火焰动画特效
12-19
HTML5 Canvas粒子火焰动画特效，
HTML 3D表白爱心
热门推荐
MOONCOM的博客
11-21 1万+
代码如下: Document @keyframes ani{ from{ transform:rotateY(0deg) rotateX(0deg); } to{ transform:rotateY(360deg) rotateX(360deg); } } body{ perspective:1000px; } #heart{ pos
canvas描边动画
08-30
你可以使用HTML5的Canvas元素和JavaScript来实现描边动画。下面是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Canvas 描边动画</title> <style> canvas { border: 1px solid #000; } </style> </head> <body> <canvas id="myCanvas" width="400" height="400"></canvas> <script> // 获取画布和上下文对象 const canvas = document.getElementById("myCanvas"); const ctx = canvas.getContext("2d"); // 定义动画的属性 const lineWidth = 5; // 描边的线宽 const strokeColor = "#ff0000"; // 描边的颜色 const animationSpeed = 2; // 动画速度 let currentLineWidth = 0; // 当前线宽 // 动画函数 function animate() { // 清除画布 ctx.clearRect(0, 0, canvas.width, canvas.height); // 绘制描边路径 ctx.lineWidth = currentLineWidth; ctx.strokeStyle = strokeColor; ctx.strokeRect(50, 50, canvas.width - 100, canvas.height - 100); // 更新线宽 currentLineWidth += animationSpeed; // 判断线宽是否超过预设值，超过则重置 if (currentLineWidth > lineWidth) { currentLineWidth = 0; } // 循环调用动画函数 requestAnimationFrame(animate); } // 启动动画 animate(); </script> </body> </html> ``` 这段代码会在一个400x400像素的画布上绘制一个带有描边动画的矩形。你可以根据需要修改动画的属性，如线宽、颜色和速度等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值