你最想要的canvas动画简单入门教程

斑竹小队长
斑竹小队长 发布于 2016-12-29 13:59:08 浏览:3285 类型:原创 - 教程 分类:JavaScript - JS 二维码: 作者原创 版权保护
也许只是在码海里多看了你一眼,便从此无可自拔。你那绚烂的身姿依旧在脑海久久萦绕。

这就是canvas
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>suanfa</title>
	<style>
		body{
			margin:0;
			padding:0;
		}
		#canvas{
			background-color: #000;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<script>
		var canvas = document.querySelector('#canvas');
		var w = canvas.width = window.innerWidth;
		var h = canvas.height = window.innerHeight;
		var cxt = canvas.getContext('2d');
		var nums = 2;//生成个数
		var Obj = [];//保存属性
		var colors=['red','blue','green','yellow'];//颜色设置
		canvas.onmousemove = function(ev){
			var x = ev.clientX;
			var y = ev.clientY;
			for(var i=0;i<nums;i++){
				var o = {
					x:Math.random()*30+x,
					y:Math.random()*30+y,
					r:Math.round(Math.random()*20+1),
					color:colors[Math.floor(Math.random()*colors.length)],
					vx:Math.random()*3-3,
					vy:Math.random()*3-3
				}
				Obj.push(o);
				if(Obj.length == 300){
					Obj.shift();
				}//考虑到性能,维持在300个
			 circle(cxt,Obj[i].x,Obj[i].y,Obj[i].r,Obj[i].color)
			}
		};//获取随机圆的属性
		function circle(cxt,x,y,r,color){
			cxt.save();
			cxt.beginPath();
			cxt.arc(x,y,r,0,2*Math.PI)
			cxt.fillStyle = color;
			cxt.fill();
			cxt.restore();
		};//绘制圆
		!function animate(){
			cxt.clearRect(0,0,w,h);
			for(var i=0;i<Obj.length;i++){
				Obj[i].x += Obj[i].vx;
				Obj[i].y += Obj[i].vy;
				if(Obj[i].x>w||Obj[i].x<0){
					Obj[i].vx = -Obj[i].vx;
				}else if(Obj[i].y>h||Obj[i].y<0){
					Obj[i].vy = -Obj[i].vy;
				}//边缘检测

				 circle(cxt,Obj[i].x,Obj[i].y,Obj[i].r,Obj[i].color)

				}
				
			
			window.requestAnimationFrame(animate);
		}();//重复绘制 == 动画
	</script>
</body>
</html>

今天的目标就是完成这个canvas动画。
写代码之前先思考一下各个步骤,这是个好习惯,应该养成。
  • 透过现象看本质,鼠标每次移动都生成圆,圆的位置始终在鼠标位置附近。然后开始动画。
  • 也就是移动鼠标的时候生成每个圆所需的各种属性包括,圆的x,y,半径,颜色,初始运动速度等。
  • 当圆数量过多的时候最先出现的圆会一个一个消失,也就是控制了圆的总数量
  • 最后动画,进行边缘检测。
第一步 定义所需变量
var nums = 2 //每次移动生成2个圆
var Obj = []//保存每个圆的属性
var colors = ['red','green','blue'] //设置颜色,可以按自己要求设置,任性

第二步,鼠标移动生成
canvas.onmousemove = function(ev){
			var x = ev.clientX;
			var y = ev.clientY;
			for(var i=0;i<nums;i++){
				var o = {
					x:Math.random()*30+x,
					y:Math.random()*30+y,
					r:Math.round(Math.random()*20+1),
					color:colors[Math.floor(Math.random()*colors.length)],
					vx:Math.random()*3-3,
					vy:Math.random()*3-3
				}
				Obj.push(o);
				if(Obj.length == 300){
					Obj.shift();
				}//考虑到性能,维持在300个
			 circle(cxt,Obj[i].x,Obj[i].y,Obj[i].r,Obj[i].color)
			}
		};//获取随机圆的属性

第三步,动画
!function animate(){
			cxt.clearRect(0,0,w,h);
			for(var i=0;i<Obj.length;i++){
				Obj[i].x += Obj[i].vx;
				Obj[i].y += Obj[i].vy;
				if(Obj[i].x>w||Obj[i].x<0){
					Obj[i].vx = -Obj[i].vx;
				}else if(Obj[i].y>h||Obj[i].y<0){
					Obj[i].vy = -Obj[i].vy;
				}//边缘检测

				 circle(cxt,Obj[i].x,Obj[i].y,Obj[i].r,Obj[i].color)

				}
				
			
			window.requestAnimationFrame(animate);
		}();//重复绘制 == 动画

第四步,额,好像没有第四步了。到这动画已经可以跑起来了,有没有感觉很简单呢。
当然还有些细节没有做,但我们的目的只是动画入门。
各位可以根据自己的喜好更改一些属性达到更绚烂的效果。
以后有时间会写一点关于算法的笔记以及更加绚烂的canvas动画教程。
最后说一句,canvas动画没有想象中的那么难。花点时间,每个人都能学会。
还有,听说点赞的人运气不会太差哦。
群众的眼光是雪亮的,出现了点失误,更新一下
失误失误,少了一步,哈哈
在第一步的时候写上画圆的函数
function circle(cxt,x,y,r,color){
			cxt.save();
			cxt.beginPath();
			cxt.arc(x,y,r,0,2*Math.PI)
			cxt.fillStyle = color;
			cxt.fill();
			cxt.restore();
		};//绘制圆

关于出现滚动条的问题,canvas有点不一样,有点类似图片,给canvas添加display:block后就可以完美解决滚动条了。
还有,在下不是什么大神,和大家一样都在学习呢。
z
给个赞 45 人点赞
收藏 64 人收藏
评论 已有 32 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
daiping2008
daiping20082017-01-09 16:21:1032F
可以可以
举报 支持 (0) 回复 (0)
15726816232
157268162322017-01-03 15:35:0831F
~function() {}();  +function() {}();  !function() {}();  (function(){})(); 都是一样的意思,就是写法不一样,都是告诉浏览器自动运行这个函数的。因为!+()这些符号的运算符是最高的,所以会先运行它们后面的函数。我是这么理解的,不知道是不是这样emoticon //@674587054:为什么我把这个后面的括号去掉 程序就变了  吧感叹号去掉 这个程序整个就不对了  , 希望大神可以给个完整的解释或者案例  谢谢~ //@斑竹小队长:这个是自运行的意思 其实就是类似闭包的写法 一般都是写成(function(){})()这样的。 //@674587054:!function(){
}()这个感叹号和后面的括号什么意思  很让我费解  求大神解释
举报 支持 (0) 回复 (0)
18792212799
187922127992017-01-02 21:45:0230F
请问如何在鼠标不动的时候,消除这些小圆球
举报 支持 (0) 回复 (0)
老姚
老姚2016-12-30 15:30:0729F
码海,哈哈哈
举报 支持 (0) 回复 (0)
斑竹小队长
斑竹小队长2016-12-30 09:01:3628F
匿名函数的一种写法 你也可以写其他的符号 都一样的 不过  大多数都是写成()()这样的形式 //@PCQ:!function animate(){这个前面的感叹号是什么意思emoticon
举报 支持 (0) 回复 (0)
PCQ
PCQ2016-12-30 08:58:2727F
!function animate(){这个前面的感叹号是什么意思emoticon
举报 支持 (0) 回复 (1)
天凉好个秋
天凉好个秋2016-12-29 17:51:1526F
emoticon待会去试试 //@斑竹小队长:骚瑞骚瑞,这个问题有点复杂了,发现在边缘的话 圆没办法运动起来,运动起来了也不会弹回来。要不直接让它在边缘的时候产生的圆不超过屏幕。那就要判断鼠标移动时的x,y了。鼠标移动时x是不是小于了x+r 这个r取设置的最大半径。小于了就让x等于x+r。其他的以此类推,应该可以解决吧 //@天凉好个秋:我是指鼠标放在边缘时产生的圆,有一部分卡在外面了。 //@斑竹小队长:在判断边缘的改变一下。这样,(x<r || (x+r)>w)。 //@天凉好个秋:我在想,怎样加一个判断,鼠标在边缘的时候,产生的圆不会卡在边缘里面。 //@斑竹小队长:哈哈,解决了就好emoticon //@天凉好个秋:原来如此,终于解决了! //@斑竹小队长:这个就是细节上没去处理了,因为边缘检测的时候是按照圆X,Y没有加上圆的半径去判断的,所以有的圆就会超出屏幕了。还有经过多次测试,发现只有canvas会出现滚动条,原因可能是canvas特性与其它块级元素不同造成的,所以给canvas添加一个样式 display:block; 完美解决。 //@天凉好个秋:加了个html{overflow: hidden;}滚动条倒是没了,但球还是会运动到可视区外 //@斑竹小队长:产生就对了 我也产生了,主要就是因为获取屏幕可视区的方法不同造成的,你可以搜下各个方法获取可视区去试试看,也许有意想不到的收获呢 //@天凉好个秋:大神,跟着码完了,但是浏览器产生了滚动条。
举报 支持 (0) 回复 (0)
斑竹小队长
斑竹小队长2016-12-29 17:23:4625F
骚瑞骚瑞,这个问题有点复杂了,发现在边缘的话 圆没办法运动起来,运动起来了也不会弹回来。要不直接让它在边缘的时候产生的圆不超过屏幕。那就要判断鼠标移动时的x,y了。鼠标移动时x是不是小于了x+r 这个r取设置的最大半径。小于了就让x等于x+r。其他的以此类推,应该可以解决吧 //@天凉好个秋:我是指鼠标放在边缘时产生的圆,有一部分卡在外面了。 //@斑竹小队长:在判断边缘的改变一下。这样,(x<r || (x+r)>w)。 //@天凉好个秋:我在想,怎样加一个判断,鼠标在边缘的时候,产生的圆不会卡在边缘里面。 //@斑竹小队长:哈哈,解决了就好emoticon //@天凉好个秋:原来如此,终于解决了! //@斑竹小队长:这个就是细节上没去处理了,因为边缘检测的时候是按照圆X,Y没有加上圆的半径去判断的,所以有的圆就会超出屏幕了。还有经过多次测试,发现只有canvas会出现滚动条,原因可能是canvas特性与其它块级元素不同造成的,所以给canvas添加一个样式 display:block; 完美解决。 //@天凉好个秋:加了个html{overflow: hidden;}滚动条倒是没了,但球还是会运动到可视区外 //@斑竹小队长:产生就对了 我也产生了,主要就是因为获取屏幕可视区的方法不同造成的,你可以搜下各个方法获取可视区去试试看,也许有意想不到的收获呢 //@天凉好个秋:大神,跟着码完了,但是浏览器产生了滚动条。 //@斑竹小队长emoticon
举报 支持 (0) 回复 (1)
天凉好个秋
天凉好个秋2016-12-29 17:13:1324F
我是指鼠标放在边缘时产生的圆,有一部分卡在外面了。 //@斑竹小队长:在判断边缘的改变一下。这样,(x<r || (x+r)>w)。 //@天凉好个秋:我在想,怎样加一个判断,鼠标在边缘的时候,产生的圆不会卡在边缘里面。 //@斑竹小队长:哈哈,解决了就好emoticon //@天凉好个秋:原来如此,终于解决了! //@斑竹小队长:这个就是细节上没去处理了,因为边缘检测的时候是按照圆X,Y没有加上圆的半径去判断的,所以有的圆就会超出屏幕了。还有经过多次测试,发现只有canvas会出现滚动条,原因可能是canvas特性与其它块级元素不同造成的,所以给canvas添加一个样式 display:block; 完美解决。 //@天凉好个秋:加了个html{overflow: hidden;}滚动条倒是没了,但球还是会运动到可视区外 //@斑竹小队长:产生就对了 我也产生了,主要就是因为获取屏幕可视区的方法不同造成的,你可以搜下各个方法获取可视区去试试看,也许有意想不到的收获呢 //@天凉好个秋:大神,跟着码完了,但是浏览器产生了滚动条。 //@斑竹小队长emoticon //@天凉好个秋:有步骤的都是可以赞的
举报 支持 (0) 回复 (1)
斑竹小队长
斑竹小队长2016-12-29 17:11:5223F
哈哈 我的失误,忘记这步了 //@PCQ:在最下面...没看到... //@斑竹小队长:是的emoticon //@天凉好个秋:这个是下面的function circle(){}函数 //@PCQ:怎么没搜到这个方法
举报 支持 (0) 回复 (0)
斑竹小队长
斑竹小队长2016-12-29 17:10:5722F
在判断边缘的改变一下。这样,(x<r || (x+r)>w)。 //@天凉好个秋:我在想,怎样加一个判断,鼠标在边缘的时候,产生的圆不会卡在边缘里面。 //@斑竹小队长:哈哈,解决了就好emoticon //@天凉好个秋:原来如此,终于解决了! //@斑竹小队长:这个就是细节上没去处理了,因为边缘检测的时候是按照圆X,Y没有加上圆的半径去判断的,所以有的圆就会超出屏幕了。还有经过多次测试,发现只有canvas会出现滚动条,原因可能是canvas特性与其它块级元素不同造成的,所以给canvas添加一个样式 display:block; 完美解决。 //@天凉好个秋:加了个html{overflow: hidden;}滚动条倒是没了,但球还是会运动到可视区外 //@斑竹小队长:产生就对了 我也产生了,主要就是因为获取屏幕可视区的方法不同造成的,你可以搜下各个方法获取可视区去试试看,也许有意想不到的收获呢 //@天凉好个秋:大神,跟着码完了,但是浏览器产生了滚动条。 //@斑竹小队长emoticon //@天凉好个秋:有步骤的都是可以赞的
举报 支持 (0) 回复 (1)
天凉好个秋
天凉好个秋2016-12-29 17:04:3321F
我在想,怎样加一个判断,鼠标在边缘的时候,产生的圆不会卡在边缘里面。 //@斑竹小队长:哈哈,解决了就好emoticon //@天凉好个秋:原来如此,终于解决了! //@斑竹小队长:这个就是细节上没去处理了,因为边缘检测的时候是按照圆X,Y没有加上圆的半径去判断的,所以有的圆就会超出屏幕了。还有经过多次测试,发现只有canvas会出现滚动条,原因可能是canvas特性与其它块级元素不同造成的,所以给canvas添加一个样式 display:block; 完美解决。 //@天凉好个秋:加了个html{overflow: hidden;}滚动条倒是没了,但球还是会运动到可视区外 //@斑竹小队长:产生就对了 我也产生了,主要就是因为获取屏幕可视区的方法不同造成的,你可以搜下各个方法获取可视区去试试看,也许有意想不到的收获呢 //@天凉好个秋:大神,跟着码完了,但是浏览器产生了滚动条。 //@斑竹小队长emoticon //@天凉好个秋:有步骤的都是可以赞的
举报 支持 (0) 回复 (1)
斑竹小队长
斑竹小队长2016-12-29 16:56:3120F
哈哈,解决了就好emoticon //@天凉好个秋:原来如此,终于解决了! //@斑竹小队长:这个就是细节上没去处理了,因为边缘检测的时候是按照圆X,Y没有加上圆的半径去判断的,所以有的圆就会超出屏幕了。还有经过多次测试,发现只有canvas会出现滚动条,原因可能是canvas特性与其它块级元素不同造成的,所以给canvas添加一个样式 display:block; 完美解决。 //@天凉好个秋:加了个html{overflow: hidden;}滚动条倒是没了,但球还是会运动到可视区外 //@斑竹小队长:产生就对了 我也产生了,主要就是因为获取屏幕可视区的方法不同造成的,你可以搜下各个方法获取可视区去试试看,也许有意想不到的收获呢 //@天凉好个秋:大神,跟着码完了,但是浏览器产生了滚动条。 //@斑竹小队长emoticon //@天凉好个秋:有步骤的都是可以赞的
举报 支持 (0) 回复 (1)
674587054
6745870542016-12-29 16:56:2719F
好的 谢谢 //@斑竹小队长:这就涉及其他的知识了,建议去了解一下匿名函数,函数声明和表达式的区别。 //@674587054:为什么我把这个后面的括号去掉 程序就变了  吧感叹号去掉 这个程序整个就不对了  , 希望大神可以给个完整的解释或者案例  谢谢~ //@斑竹小队长:这个是自运行的意思 其实就是类似闭包的写法 一般都是写成(function(){})()这样的。 //@674587054:!function(){
}()这个感叹号和后面的括号什么意思  很让我费解  求大神解释
举报 支持 (0) 回复 (0)
斑竹小队长
斑竹小队长2016-12-29 16:52:1118F
这就涉及其他的知识了,建议去了解一下匿名函数,函数声明和表达式的区别。 //@674587054:为什么我把这个后面的括号去掉 程序就变了  吧感叹号去掉 这个程序整个就不对了  , 希望大神可以给个完整的解释或者案例  谢谢~ //@斑竹小队长:这个是自运行的意思 其实就是类似闭包的写法 一般都是写成(function(){})()这样的。 //@674587054:!function(){
}()这个感叹号和后面的括号什么意思  很让我费解  求大神解释
举报 支持 (0) 回复 (1)

作者最新