用JavaScript实现网红太空人表盘（绝对详细、绝对原创），附源码下载
2024-06-09 04:14:32
引言：网上最近太空人表盘很火，之前看到有个兄弟用svg写的，但是我也不会这个啊，我就琢磨着用canvas写了一个，效果感觉还不错，拿出来大家唠唠！
效果图：
思路
分两个画布来绘制，画布1用来放置不动的东西（背景、表盘、文字信息）；
画布2用来绘制太空人的转动和时间的更新（经常要重新绘制）；
太空人的转动的话就是用很多图片来切换，达到转动的效果。
绘制表盘
圆形构造函数
//构造函数function Circle(o){this.x=0,//圆心X坐标this.y=0,//圆心Y坐标this.r=0,//半径this.startAngle=0,//开始角度this.endAngle=0,//结束角度this.anticlockwise=false;//顺时针，逆时针方向指定this.stroke=false;//是否描边this.fill=false;//是否填充this.scaleX=1;//缩放X比例this.scaleY=1;//缩放Y比例this.rotate=0;this.init(o);}//初始化Circle.prototype.init=function(o){for(var key in o){this[key]=o[key];}}//绘制Circle.prototype.render=function(context){var ctx=context;//获取上下文ctx.save();ctx.beginPath();ctx.translate(this.x,this.y);if(this.fill){ctx.moveTo(0,0);}//ctx.moveTo(this.x,this.y);ctx.scale(this.scaleX,this.scaleY);//设定缩放ctx.arc(0,0,this.r,this.startAngle,this.endAngle);//画圆if(this.lineWidth){//线宽ctx.lineWidth=this.lineWidth;}if(this.fill){//是否填充this.fillStyle?(ctx.fillStyle=this.fillStyle):null;ctx.fill();}if(this.stroke){//是否描边this.strokeStyle?(ctx.strokeStyle=this.strokeStyle):null;ctx.stroke();} ctx.restore();return this;}
绘制代码
//绘制表盘SpaceMan.prototype.drawClock=function(){var x=y=0,cilcle;x=this.w/2;y=this.h/2;//绘制外面的大圆cilcle = new Circle({x:x,//圆心X坐标y:y,//圆心X坐标r:250,//半径startAngle:0,//开始角度endAngle:2*Math.PI,//结束角度lineWidth:2,fill:true,fillStyle:'#444444'});this.renderArr.push(cilcle);//绘制第2个圆cilcle = new Circle({x:x,//圆心X坐标y:y,//圆心X坐标r:220,//半径startAngle:0,//开始角度endAngle:2*Math.PI,//结束角度lineWidth:2,fill:true,fillStyle:'#DFE6F0'});this.renderArr.push(cilcle);}
此时页面的效果：
绘制分隔线
构造函数
//直线的构造function Line(o){this.x=0,//x坐标this.y=0,//y坐标this.startX=0,//开始点x位置this.startY=0, //开始点y位置this.endX=0,//结束点x位置this.endY=0;//结束点y位置this.thin=false;//设置变细系数this.init(o);}Line.prototype.init=function(o){for(var key in o){this[key]=o[key];}}Line.prototype.render=function(ctx){innerRender(this);function innerRender(obj){ctx.save()ctx.beginPath();ctx.translate(obj.x,obj.y);if(obj.thin){ctx.translate(0.5,0.5);}if(obj.lineWidth){//设定线宽ctx.lineWidth=obj.lineWidth;}if(obj.strokeStyle){ctx.strokeStyle=obj.strokeStyle;}//划线ctx.moveTo(obj.startX, obj.startY);ctx.lineTo(obj.endX, obj.endY);ctx.stroke();ctx.restore();}return this;}
绘制代码
//分隔线的 绘制SpaceMan.prototype.drawClockLine=function(){var x=y=0;var line = new Line({x:x,y:y,startX:70,startY:120,endX:430,endY:120,strokeStyle:'#030609',lineWidth:3})this.renderArr.push(line);line = new Line({x:x,y:y,startX:220,startY:30,endX:220,endY:120,strokeStyle:'#030609',lineWidth:3})this.renderArr.push(line);line = new Line({x:x,y:y,startX:58,startY:360,endX:442,endY:360,strokeStyle:'#030609',lineWidth:3})this.renderArr.push(line);line = new Line({x:x,y:y,startX:180,startY:410,endX:180,endY:460,strokeStyle:'#030609',lineWidth:3})this.renderArr.push(line);line = new Line({x:x,y:y,startX:178,startY:410,endX:342,endY:410,strokeStyle:'#030609',lineWidth:3})this.renderArr.push(line);line = new Line({x:x,y:y,startX:340,startY:410,endX:340,endY:360,strokeStyle:'#030609',lineWidth:3})this.renderArr.push(line);}
此时效果
绘制文字
构造函数
//文字的构造函数function Text(o){this.x=0,//x坐标this.y=0,//y坐标this.disX=0,//x坐标偏移量this.disY=0,//y坐标偏移量this.text='',//内容this.font=null;//字体this.textAlign=null;//对齐方式this.init(o);}Text.prototype.init=function(o){for(var key in o){this[key]=o[key];}}Text.prototype.render=function(context){this.ctx=context;innerRender(this);function innerRender(obj){var ctx=obj.ctx;ctx.save()ctx.beginPath();ctx.translate(obj.x,obj.y);if(obj.angle){//根据旋转角度来执行旋转ctx.rotate(-obj.angle*Math.PI/180);}if(obj.font){ctx.font=obj.font;}if(obj.textAlign){ctx.textAlign=obj.textAlign;}if(obj.fill){//是否填充obj.fillStyle?(ctx.fillStyle=obj.fillStyle):null;ctx.fillText(obj.text,obj.disX,obj.disY);}if(obj.stroke){//是否描边obj.strokeStyle?(ctx.strokeStyle=obj.strokeStyle):null;ctx.strokeText(obj.text,obj.disX,obj.disY);}ctx.restore();}return this;}
绘制
//组装文字信息SpaceMan.prototype.drawText=function(){var content="",x=y=0;//天气x=230;y=60,content="空气良好";var text = new Text({x:x,y:y,text:content,font:'bold 20px ans-serif',textAlign:'left',fill:true,fillStyle:'#44444'}); this.renderArr.push(text); x=230;y=85,content="晴天";var text = new Text({x:x,y:y,text:content,font:'20px ans-serif',textAlign:'left',fill:true,fillStyle:'#44444'}); this.renderArr.push(text);//气温x=230;y=110,content="23°C";var text = new Text({x:x,y:y,text:content,font:'18px ans-serif',textAlign:'left',fill:true,fillStyle:'#44444'}); this.renderArr.push(text);//绘制最小温度x=285;y=110,content="18°";var text = new Text({x:x,y:y,text:content,font:'18px ans-serif',textAlign:'left',fill:true,fillStyle:'#44444'}); this.renderArr.push(text);//绘制最大温度x=285;y=85,content="26°";var text = new Text({x:x,y:y,text:content,font:'18px ans-serif',textAlign:'left',fill:true,fillStyle:'#44444'}); this.renderArr.push(text);//电量x=120;y=115,content="70%";var text = new Text({x:x,y:y,text:content,font:'bold 35px ans-serif',textAlign:'left',fill:true,fillStyle:'#44444'}); this.renderArr.push(text);//心率x=65;y=305,content="80~128";var text = new Text({x:x,y:y,text:content,font:'20px ans-serif',textAlign:'left',fill:true,fillStyle:'#44444'}); this.renderArr.push(text);x=130;y=345,content="92";var text = new Text({x:x,y:y,text:content,font:'bold 30px ans-serif',textAlign:'left',fill:true,fillStyle:'#44444'}); this.renderArr.push(text);//步数x=370;y=345,content="7032";var text = new Text({x:x,y:y,text:content,font:'bold 26px ans-serif',textAlign:'left',fill:true,fillStyle:'#44444'}); this.renderArr.push(text);//睡眠x=110;y=395,content="睡眠";var text = new Text({x:x,y:y,text:content,font:'30px ans-serif',textAlign:'left',fill:true,fillStyle:'#44444'}); this.renderArr.push(text);x=190;y=400,content="8h30m";var text = new Text({x:x,y:y,text:content,font:'BOLD 34px ans-serif',textAlign:'left',fill:true,fillStyle:'#44444'}); this.renderArr.push(text);//距离x=350;y=395,content="距离";var text = new Text({x:x,y:y,text:content,font:'30px ans-serif',textAlign:'left',fill:true,fillStyle:'#44444'}); this.renderArr.push(text);x=210;y=445,content="9.22km";var text = new Text({x:x,y:y,text:content,font:'BOLD 32px ans-serif',textAlign:'left',fill:true,fillStyle:'#44444'}); this.renderArr.push(text);}
效果如下：
绘制修饰图片
图片构造函数
//图片对象ImageDraw构造函数function ImageDraw(o,obj){this.id='',this.image=0,//图片对象（必填）this.sx=0,//图片切片开始x位置（显示整个图片的时候不需要填）this.sy=0,//图片切片开始y位置（显示整个图片的时候不需要填）this.sWidth=0, //图片切片开始宽度（显示整个图片的时候不需要填）this.sHeight=0,//图片切片开始高度（显示整个图片的时候不需要填）this.dx=0, //图片目标x位置（必填）this.dy=0, //图片目标y位置（必填）this.dWidth=0,//图片目标显示宽度（宽度不缩放时不必填）this.dHeight=0//图片目标高度高度（高度不缩放时不必填）this.init(o,obj);}ImageDraw.prototype.init=function(o,obj){this.lol=obj;for(var key in o){this[key]=o[key];}return this;}ImageDraw.prototype.render=function(context){draw(context,this);function draw(context,obj) {var ctx=context;ctx.save();if(!obj.image || getType(obj.dx)=='undefined' || getType(obj.dy)=='undefined'){throw new Error("绘制图片缺失参数"); return;} ctx.translate(obj.dx,obj.dy);if(getType(obj.sx)!='undefined' && getType(obj.sy)!='undefined' && obj.sWidth && obj.sHeight && obj.dWidth && obj.dHeight){//裁剪图片，显示时候有缩放ctx.drawImage(obj.image, obj.sx, obj.sy, obj.sWidth, obj.sHeight, 0, 0, obj.dWidth, obj.dHeight);}else if(obj.dWidth && obj.dHeight){ctx.drawImage(obj.image, 0, 0, obj.dWidth, obj.dHeight);//原始图片，显示时候有缩放}else{ctx.drawImage(obj.image,0, 0);//原始图片，显示时候无缩放}ctx.restore();}}ImageDraw.prototype.isPoint=function(pos){//鼠标位置的x、y要分别大于dx、dy 且x、y要分别小于 dx+dWidth、dy+dHeightif(pos.x>this.dx && pos.y>this.dy && pos.x<this.dx+this.dWidth && pos.y<this.dy+this.dHeight ){//表示处于当前图片对象范围内return true;}return false;}
绘制
//组装图片对象信息SpaceMan.prototype.drawOtherImg=function(){//绘制电量var image = this.imgObj[66];var img,x=y=0,sWidth=200,sHeight=200,dx=170,dy=45,dWidth=50,dHeight=50;img = new ImageDraw({image:image,sx:x,sy:y,sWidth:sWidth,sHeight:sHeight, dx:dx, dy:dy ,dWidth:dWidth,dHeight:dHeight},this);this.renderArr.push(img);//绘制太阳image = this.imgObj[62];sWidth=200,sHeight=200,dx=340,dy=70,dWidth=50,dHeight=50;img = new ImageDraw({image:image,sx:x,sy:y,sWidth:sWidth,sHeight:sHeight, dx:dx, dy:dy ,dWidth:dWidth,dHeight:dHeight},this);this.renderArr.push(img); //绘制最大温度image = this.imgObj[65];var img,x=y=0,sWidth=200,sHeight=200,dx=315,dy=70,dWidth=20,dHeight=20;img = new ImageDraw({image:image,sx:x,sy:y,sWidth:sWidth,sHeight:sHeight, dx:dx, dy:dy ,dWidth:dWidth,dHeight:dHeight},this);this.renderArr.push(img);//绘制最小温度image = this.imgObj[64];var img,x=y=0,sWidth=200,sHeight=200,dx=315,dy=90,dWidth=20,dHeight=20;img = new ImageDraw({image:image,sx:x,sy:y,sWidth:sWidth,sHeight:sHeight, dx:dx, dy:dy ,dWidth:dWidth,dHeight:dHeight},this);this.renderArr.push(img);//绘制心率image = this.imgObj[61];sWidth=200,sHeight=200,dx=70,dy=305,dWidth=60,dHeight=60;img = new ImageDraw({image:image,sx:x,sy:y,sWidth:sWidth,sHeight:sHeight, dx:dx, dy:dy ,dWidth:dWidth,dHeight:dHeight},this);this.renderArr.push(img); //绘制步数image = this.imgObj[63];sWidth=200,sHeight=200,dx=320,dy=310,dWidth=50,dHeight=50;img = new ImageDraw({image:image,sx:x,sy:y,sWidth:sWidth,sHeight:sHeight, dx:dx, dy:dy ,dWidth:dWidth,dHeight:dHeight},this);this.renderArr.push(img);}
此时的效果
绘制太空人
代码
//组装太空人图片对象信息SpaceMan.prototype.drawImg=function(){var image = this.imgObj[this.imageKey];var img,x=y=0,sWidth=534,sHeight=598,dx=190,dy=200,dWidth=120,dHeight=134;img = new ImageDraw({image:image,sx:x,sy:y,sWidth:sWidth,sHeight:sHeight, dx:dx, dy:dy ,dWidth:dWidth,dHeight:dHeight},this);this.renderArr2.push(img); }
此时效果
绘制时间
入口代码
//绘制日期SpaceMan.prototype.drawDateTime=function(){this.drawHour();//绘制小时this.drawMinute();//绘制分钟this.drawSecond();//绘制秒钟this.drawWeekDay();//绘制周this.drawMonthDate();//绘制日this.drawMonthDate2();//绘制农历}
绘制小时
//绘制小时SpaceMan.prototype.drawHour=function(){var content=this.hour+"",x=y=0;//小时x=120;y=190,content=(content.length==1?(0+content):content);var text = new Text({x:x,y:y,text:content,font:'bold 80px ans-serif',textAlign:'left',fill:true,fillStyle:'#44444'}); this.renderArr2.push(text); this.hourObj=text;//绘制 ：号x=220;y=175,content=":";text = new Text({x:x,y:y,text:content,font:'bold 60px ans-serif',textAlign:'left',fill:true,fillStyle:'#44444'}); this.renderArr2.push(text); }
绘制分钟、秒钟
//绘制分钟SpaceMan.prototype.drawMinute=function(){var content=this.minute+"",x=y=0;//分x=235;y=190,content=(content.length==1?(0+content):content);var text = new Text({x:x,y:y,text:content,font:'bold 80px ans-serif',textAlign:'left',fill:true,fillStyle:'#44444'}); this.renderArr2.push(text); this.minuteObj=text;}//绘制秒钟SpaceMan.prototype.drawSecond=function(){var content=this.second+"",x=y=0;//秒x=340;y=190,content=(content.length==1?(0+content):content);var text = new Text({x:x,y:y,text:content,font:'bold 35px ans-serif',textAlign:'left',fill:true,fillStyle:'#44444'}); this.renderArr2.push(text); this.secondObj=text;}
绘制星期、日期
//绘制星期SpaceMan.prototype.drawWeekDay=function(){var x=y=0;x=350;y=270,content=this.weekArr[this.day];var text = new Text({x:x,y:y,text:content,font:'20px ans-serif',textAlign:'left',fill:true,fillStyle:'#44444'}); this.renderArr2.push(text); this.weekDayObj=text;}//绘制日SpaceMan.prototype.drawMonthDate=function(){var content=this.month+"-"+this.date,x=y=0;//小时x=400;y=270,content=(content.length==1?(0+content):content);var text = new Text({x:x,y:y,text:content,font:'20px ans-serif',textAlign:'left',fill:true,fillStyle:'#44444'}); this.renderArr2.push(text); this.monthDateObj=text;}
绘制农历
//绘制农历日SpaceMan.prototype.drawMonthDate2=function(){this.lunarObj = new LunarDay();var lunarDay = this.lunarObj.getLunarDay(this.year,this.month,this.date);var lunarDayArr = lunarDay.split(" ");var content= lunarDayArr[1],x=y=0;x=350;y=240;text = new Text({x:x,y:y,text:content,font:'20px ans-serif',textAlign:'left',fill:true,fillStyle:'#44444'}); this.renderArr2.push(text); this.lunarDateObj=text;}
效果如下 ：
到现在的话整体效果已经完成了，接下来就是要动起来
太空人转动
- 设置定时任务
- 每次更换一张图片绘制
代码
//太空人转动SpaceMan.prototype.humanRotate=function(){//不断的更新图片即可this.imageKey--;if(this.imageKey<this.startCount){this.imageKey=60;}var img = this.renderArr2[0];img.image = this.imgObj[this.imageKey];this.render2();}
效果
时间更新
更新秒
//秒钟转动SpaceMan.prototype.updateSecond=function(){this.second++;if(this.second==60){//到达60以后设置为0this.second=0;this.updateMinute();//更新分钟}var content = this.second+"";content=(content.length==1?(0+content):content);this.secondObj.text=content;}
更新分钟
//分钟更新SpaceMan.prototype.updateMinute=function(){this.minute++;if(this.minute==60){this.minute=0;this.updateHour();}var content = this.minute+"";content=(content.length==1?(0+content):content);this.minuteObj.text=content;}
更新小时
//时钟更新SpaceMan.prototype.updateHour=function(){this.hour+=1;if(this.hour==24){this.hour=0;this.updateDate();}var content = this.hour+"";content=(content.length==1?(0+content):content);this.hourObj.text=content;}
更新日、农历日
//更新日SpaceMan.prototype.updateDate=function(){var that=this,dateUpdateFlag=false,lastMonthDayLength,angleDis;this.date+=1;//日期递增1this.updateWeekDay();//更新周几if(this.date>this.currentMonthDayLength){//大于本月最大天数就切换到1日this.date=1;this.updateMonth();//更新月份}this.monthDateObj.text = this.month+"-"+this.date;this.updateMonthDate2();}//月更新SpaceMan.prototype.updateMonth=function(){var that=this;this.month+=1;if(this.month>12){this.month=1;}}//农历日期更新SpaceMan.prototype.updateMonthDate2=function(){var lunarDay = this.lunarObj.getLunarDay(this.year,this.month,this.date);var lunarDayArr = lunarDay.split(" ");var content= lunarDayArr[1];this.lunarDateObj.text=content;}
更新星期
//更新星期几SpaceMan.prototype.updateWeekDay=function(){this.day+=1;//大于6则重置if(this.day>6){this.day=0;}//数组中获取周几this.weekDayObj.text=this.weekArr[this.day];}
最终效果
兄弟们给个三连支持一下，谢谢哇！
源码下载
关注下方公众号，回复121下载代码
★更多源码
? 基于canvas的手风琴特效（附源码）?
? 抖音很火的华为太空人表盘（附源码）?
? 基于JavaScript页面动态验证码（附源码）?
? 基于JavaScript的拖动滑块拼图验证（附源码）?
? 基于JavaScript的幸运大转盘（附源码）?
? 抖音很火的罗盘时钟（附源码）?
? 基于JavaScript的俄罗斯方块小游戏（附源码）?
? 基于JavaScript的贪吃蛇游戏（附源码）?
? 基于JavaScript的拼图游戏（附源码）?
? 用JavaScript给女儿做的烟花特效（附源码）?
? 老父亲给女儿做的下雪特效，满足女儿看雪的愿望（附源码）?
? 雷达扫描特效（附源码）?
? 香港黄金配角吴孟达去世，80后程序员以轮播图来悼念达叔，达叔一路走好！（附源码）?
? 仿抖音刷新进度条（附源码）?
? 仿头条方形刷新进度条（附源码）?
? 仿360加速球、水波评分特效（附源码）?
? 基于canvas的刮刮卡（附源码）?
? 原生js写的左侧飞入拼图特效，你是喜欢美女单飞还是双飞（附源码）?
? 用js写的旋转木马，在新年献给各位刚登基的皇帝，让你的后宫转起来！程序员就是可以为所欲为！（附源码）?
? 用js写的轮播图，八位女明星，你翻谁的牌，程序员就是可以为所欲为！（附源码）?
? 原生js实现美女拼图，把美女老婆抱回家，5个美女够不够！程序员就是可以为所欲为！（附源码）?
? 用js仿探探拖拽卡片的效果、飞卡片的效果，感觉挺酷，最后有美女看哦！（附源码）?
? 老婆说程序员不懂浪漫，程序员默默拿起了键盘，这就亲手带你去看流星雨，女人真会影响拔刀的速度（附源码）?
? 学生成绩管理系统（jsp+jquery+java+mysql+tomcat）有源码，你的毕设我的心（附源码）?
用JavaScript实现网红太空人表盘（绝对详细、绝对原创），附源码下载相关推荐
- 太空人时间HTML,基于JavaScript实现网红太空人表盘的完整代码
一.效果展示 用javascript写的一个太空人表盘. 二.源代码 html代码 太空人表盘 function WatchMeter() { // 初始化dom this._initDom() // ...
- 基于JavaScript实现网红太空人表盘
一.效果展示 用javascript写的一个太空人表盘.源码请从文章末尾获取下载 二.源代码 html代码 <html> <head><title>太空人表盘< ...
- 淘宝网手机客户端应用开发见解带android版源码下载
淘宝网手机客户端是一个基于Android进行应用的项目,通过该客户端实现了注册功能 .登陆.分页展示商品列表.能够对商品按名称进行模糊查询.能够对商品进行管理 .能够对商品按价格排序.可以查看商品详细 ...
- 基于JAVA的博网即时通讯软件的设计与实现（附:源码 论文 Sql文件）
摘要 即时通讯软件即所谓的聊天工具,其主要用途是用于文字信息的传递与文件传输.使用eclipse作为即时通讯软件的开发工具,使用Socket建立通讯渠道,多线程实现多台计算机同时进行信息的传递,swi ...
- 图虫网、人人字幕Scrapy爬虫实战分享 附源码
图虫网.人人字幕Scrapy爬虫实战分享 文章已发表在个人博客,欢迎点击这里访问 序 最近用Scrapy爬取了图虫和人人字幕,图虫网以前是纯摄影爱好论坛,现在往图库方向发展了,图片质量上佳,人人字幕也 ...
- 如何使用javascript制作一个网页端3D贪吃蛇游戏（附源码及链接）
先来看游戏的最终效果: 3D网页版贪吃蛇游戏 下面来具体讲一下如何实现. 该游戏使用Hightopo的SDK制作,总共100多行代码,没有WebGL基础的同学们也可很快掌握. 场景初始化 首先,我们对 ...
- JAVA计算机毕业设计腾讯网游辅助小助手（附源码、数据库）
JAVA计算机毕业设计腾讯网游辅助小助手(附源码.数据库) 目运行 环境项配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Eclispe ...
- JAVA计算机毕业设计网课系统（附源码、数据库）
JAVA计算机毕业设计网课系统(附源码.数据库) 目运行 环境项配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(Inte ...
- JAVA计算机毕业设计夕阳红养老院系统（附源码、数据库）
JAVA计算机毕业设计夕阳红养老院系统(附源码.数据库) 目运行 环境项配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Eclispe( ...
最新文章
- C#中使用Monitor类、Lock和Mutex类来同步多线程的执行(转)
- 【bzoj1444】[Jsoi2009]有趣的游戏 AC自动机+矩阵乘法
- java调用接口失败重试,httpclient接口测试中重试控制器设置
- Delete Edges 完全图-找规律
- 简明易懂的c#入门指南_统计假设检验的简明指南
- JVM第五部分 高效并发
- CSS 背景图片 设置居中
- 有关微信小程序用户登录界面跳转问题
- Kafka报错：Couldn't find leaders for Set
- vb 分类汇总方法_高中数学19种解题方法+易错知识分类大汇总！
- 让程序员崩溃的瞬间（非程序员勿入）
- 计算机接口接触不良,如何处理电脑耳机插口接触不良
- (新零售)商户网格化运营 - 阿里云RDS PostgreSQL最佳实践
- 用户研究专题：桌面研究定性研究
- tf.constant(常量)
- iOS网络(一): Http协议通信及NSURLConnection的GET和POST方法，小文件下载
- 《把时间当作朋友》读书笔记（七）-- 管理(四）
- 戴尔科技云平台：赋能“新基建”， 打造“云底座”
- linux time效率,time(),gettimeofday()及GetTickCount()效率比较
- 深度优先搜索（DFS）和广度优先搜索（BFS）两种算法c++