HTML5 Canvas超酷动态效果！画图乱跳，文字摇摆不停

2024-03-30 技术资讯推广

canvas动画效果演示间隔绘制不同的帧，这样看起来就像动画在播放。函数setTimeout()有两个参数，第一个是参数可以传递一个JavaScript方法，代码示例：一个22帧的大雁飞行图片实现的效果：程序代码：可以用其它图片替换，替换以

奇妙的HTML5 Canvas

Canvas好强大，简直是我们前端大神的神器。除了这点，还能干啥？比如让图画乱跳，文字也跟着摇摆起来，特炫酷！今儿个就教你们咋用Canvas做出超赞的动态效果，快来围观！

准备工作

首先得找到一张PNG图片，就是形状可以拼凑在一起的那种。为啥非要是PNG？这个不懂，反正只能选这个样子的！接下来，用HTML5Canvas的draw方法来定时画图，每一帧都画上一点，动画效果自然而然就有了！虽然看上去简单，但这步其实很重要哒！

倒计时开始

这款手表功能强大可以帮你管理时间做事情。只要你告诉它你需要完成啥任务，以及想要多长时间就搞定了。比如，”setTimeout(update, 1000/30)”。记住未来总会用到这些小技巧的~

Canvas绘图大法

Canvas API里面那个drawImage()是不是有点复杂要传递好多参数！对那些乱七八糟的参数比如 myImage、offw 、 offh、width、height等等感到头疼吗?别急我来给你简明扼要地解释一下。offw、 offh表示我们从哪里开始画；width和height就是我们要把图像画成多大；至于那两个 x2、 y2，其实就是让图像出现在Canvas上的具体位置。

大雁飞行秀

哈喽，随便聊聊，我给你解释下那个大雁飞行的动画那事儿。首先要弄个图，非常重要哦；接着，这边看过来，设置里把最大帧数调成22就行。遇到图片透明上传失败的问题也不用急，仔细想想怎么解决呗，换个图片或者调整下实际帧数应该没问题，大不了多花点时间。

HTML5 Canvas超酷动态效果！画图乱跳，文字摇摆不停

惊险刺激

每次看着天空中的大雁飞得高高的，感觉像是融入了大自然中。看看它们轻轻挥动翅膀越过大空，留下长长的影子，真的好羡慕。总觉得他们要直接冲破屏幕飞过来似的！

HTML5 Canvas超酷动态效果！画图乱跳，文字摇摆不停

技术探秘

想做科技达人？学学画布动画！搞懂画布API跟JavaScript计时器，瞬间变成大神！





Canvas Mouse Event Demo

	
		var ctx = null; // global variable 2d context
		var started = false;
		var mText_canvas = null;
		var x = 0, y =0;
		var frame = 0; // 22 5*5 + 2
		var imageReady = false;
		var myImage = null;
		var px = 300;
		var py = 300;
		var x2 = 300;
		var y2 = 0;
		window.onload = function() {
			var canvas = document.getElementById("animation_canvas");
			console.log(canvas.parentNode.clientWidth);
			canvas.width = canvas.parentNode.clientWidth;
			canvas.height = canvas.parentNode.clientHeight;
			
			if (!canvas.getContext) {
			    console.log("Canvas not supported. Please install a HTML5 compatible browser.");
			    return;
			}
			
			// get 2D context of canvas and draw rectangel
			ctx = canvas.getContext("2d");
			ctx.fillStyle="black";
			ctx.fillRect(0, 0, canvas.width, canvas.height);
			myImage = document.createElement('img');
			myImage.src = "../robin.png";
			myImage.onload = loaded();
		}  
		
		function loaded() {
		    imageReady = true;
		    setTimeout( update, 1000/30);
		}
		
		function redraw() {
			ctx.clearRect(0, 0, 460, 460)
			ctx.fillStyle="black";
			ctx.fillRect(0, 0, 460, 460);
			
			// find the index of frames in image
			var height = myImage.naturalHeight/5;
			var width = myImage.naturalWidth/5;
			var row = Math.floor(frame / 5);
			var col = frame - row * 5;
			var offw = col * width;
			var offh = row * height;
			
			// first robin
			px = px - 5;
			py = py - 5;
			if(px < -50) {
				px = 300;
			}
			if(py < -50) {
				py = 300;
			}
			
			//var rate = (frame+1) /22;
			//var rw = Math.floor(rate * width);
			//var rh = Math.floor(rate * height);
			ctx.drawImage(myImage, offw, offh, width, height, px, py, width, height);
			
			// second robin			
			x2 = x2 - 5;
			y2 = y2 + 5;
			if(x2 = 22) frame = 0;
		    setTimeout( update, 1000/30);
		}
		
	


	HTML Canvas Animations Demo - By Gloomy Fish
	Play Animations

创意无限

试下用Canvas弄点儿特效，加里面背景音乐跟互动效果，让你做出来的东西更好玩儿。不怕试试新的，总会有些惊奇的事儿发生，没准还能提升你自己的技术水平！

			    						    						    						    					    		
			    					    				    					    			 原文链接：https://www.icz.com/technicalinformation/web/2024/03/12243.html，转载请注明出处~~~