想自己动手做个太空人表盘？来看看这个详细的教程！

大家好，最近网上太空人表盘挺火的，很多朋友都用svg做了，不过我这里用canvas来实现，效果也不错，今天就来和大家分享一下！

思路概述

这个表盘主要分为两个画布：一个画布用来放置不动的东西，比如背景、表盘和文字信息；另一个画布用来绘制太空人的转动和时间的更新。

绘制表盘

function Circle(o){
  this.x=0;
  this.y=0;
  this.r=0;
  this.startAngle=0;
  this.endAngle=0;
  this.anticlockwise=false;
  this.stroke=false;
  this.fill=false;
  this.scaleX=1;
  this.scaleY=1;
  this.rotate=0;
  
  this.init(o);
}

绘制分隔线

function Line(o){
  this.x=0;
  this.y=0;
  this.startX=0;
  this.startY=0;
  this.endX=0;
  this.endY=0;
  this.thin=false;
  
  this.init(o);
}

绘制文字

function Text(o){
  this.x=0;
  this.y=0;
  this.disX=0;
  this.disY=0;
  this.text='';
  this.font=null;
  this.textAlign=null;
  
  this.init(o);
}

绘制修饰图片

function ImageDraw(o,obj){
  this.id='',
  this.image=0;
  this.sx=0;
  this.sy=0;
  this.sWidth=0;
  this.sHeight=0;
  this.dx=0;
  this.dy=0;
  this.dWidth=0;
  this.dHeight=0;
  
  this.init(o,obj);
}

绘制太空人

function drawImg(){
  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);		
}

绘制时间

function drawDateTime(){
  this.drawHour();
  this.drawMinute();
  this.drawSecond();
  
  this.drawWeekDay();
  this.drawMonthDate();
  this.drawMonthDate2();
}

太空人转动和时间更新

function humanRotate(){
  this.imageKey--;
  if(this.imageKey

以上就是制作太空人表盘的详细教程，希望对大家有所帮助！如果你还有其他问题，欢迎在评论区留言交流。

我是陆砚码，来自「思享编程网」（www.sxgpb.com），这里有很多有趣的编程教程和源码，欢迎你来关注我，一起学习编程！