❤ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业： 【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (125套) 】
七夕来袭！是时候展现专属于程序员的浪漫了！你打算怎么给心爱的人表达爱意？鲜花礼物？代码表白？还是创意DIY？或者…无论那种形式，快来秀我们一脸吧！
📂文章目录
二、📚网站介绍
📒网站文件方面：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
📙网页编辑方面：可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,3D动态效果,雪花飘落等等
（3）📄 js文件包含：页面炫酷效果实现
三、🔗网站效果
▶️1.视频演示
56-JavaScript和Canvas外太空表盘两款
🧩 2.图片演示
四、💒 网站代码
🧱HTML结构代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>spaceman</title>
<style>
#box{
width:500px;
height:500px;
position:absolute;
margin:0 auto;
left:0;
right:0;
top:10px;
}
</style>
</head>
<body>
<div id='box'></div>
</body>
<script type="text/javascript" src='spaceman.js'></script>
<script type="text/javascript">
var box = document.getElementById('box');
spaceMan.init(box);
</script>
</html>
🏠JS代码
;(function(global){
var spaceMan = new SpaceMan();
function SpaceMan(){
this.urlObj={}//图片路径对象
this.imgObj={};//图片对象
this.otherCount=6;//其他图片数
this.count=60;//太空人图片数，比较多，用来旋转
this.startCount=2;//太空人图片开始数
this.imageKey=2;//默认起始图片下标
this.renderArr=[];//渲染数组1
this.renderArr2=[];//渲染数组2
this.hourObj={};//小时对象
this.minuteObj={};//分钟对象
this.secondObj={};//秒钟对象
this.weekDayObj={};//星期对象
this.monthDateObj={};//日期对象
this.lunarDateObj={};//农历日期对象
this.weekArr=['周日','周一','周二','周三','周四','周五','周六'];
}
//组装图片路径
SpaceMan.prototype.loadUrl=function(){
//组装大空人图片路径
for(var i=this.count;i>=this.startCount;i--){
this.urlObj[i]="images/human ("+i+").jpg";
}
//组装其他图片路径
for(var i=1;i<=this.otherCount;i++){
this.urlObj[this.count+i]="images/other"+i+".png";
}
}
//初始化
SpaceMan.prototype.init=function(el){
if(!el) return ;
this.el=el;
this.loadUrl();
var canvas = document.createElement('canvas');//创建画布
canvas.style.cssText="background:white;";
var W = canvas.width = 500; //设置宽度
var H = canvas.height = 500;//设置高度
el.appendChild(canvas);//添加到指定的dom对象中
this.ctx = canvas.getContext('2d');
this.canvas=canvas;
this.w=W;
this.h=H;
var canvas2 = document.createElement('canvas');//创建画布
canvas2.style.cssText="position:absolute;left:0px;";//设置样式
canvas2.width = W; //设置宽度
canvas2.height = H;//设置高度
el.appendChild(canvas2);//添加到指定的dom对象中
this.ctx2 = canvas2.getContext('2d');
this.canvas2=canvas2;
//初始化时间
this.initTime();
//加载图片，并回调绘制出图片
this.loadImg(this.draw.bind(this));
}
//渲染图形
SpaceMan.prototype.render=function(){
var context=this.ctx;
this.clearCanvas();
_.each(this.renderArr,function(item){
item && item.render(context);
});
var context2=this.ctx2;
this.clearCanvas2();
_.each(this.renderArr2,function(item){
item && item.render(context2);
});
}
SpaceMan.prototype.render2=function(){
var context2=this.ctx2;
this.clearCanvas2();
_.each(this.renderArr2,function(item){
item && item.render(context2);
});
}
//清洗画布
SpaceMan.prototype.clearCanvas=function() {
this.ctx.clearRect(0,0,parseInt(this.w),parseInt(this.h));
}
//清洗画布2
SpaceMan.prototype.clearCanvas2=function() {
this.ctx2.clearRect(0,0,parseInt(this.w),parseInt(this.h));
}
//绘制入口
SpaceMan.prototype.draw=function(){
this.drawClock();//绘制表盘
this.drawClockLine();//绘制横向纵向线
this.drawText();//绘制相关文字
this.drawOtherImg();//绘制其他图片
this.drawImg();//绘制太空人图片
this.drawDateTime();//绘制日期
this.render();//执行渲染
this.start();//动画开始
}
//绘制表盘
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);
}
//组装太空人图片对象信息
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.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.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'
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);
}
//加载图片
SpaceMan.prototype.loadImg=function(fn){
var that=this;
var keys = Object.keys(this.urlObj);
var url,key;
var n=0;
for(var i=0;i<keys.length;i++)
{
if(cMonth==Math.floor(CalendarData[m]/0x10000)+1){
cMonth=1-cMonth;
}
if(cMonth>Math.floor(CalendarData[m]/0x10000)+1){
cMonth--;
}
}
}
function GetcDateString(){
var tmp="";
tmp+=tgString.charAt((cYear-4)%10);
tmp+=dzString.charAt((cYear-4)%12);
tmp+="(";
tmp+=sx.charAt((cYear-4)%12);
tmp+=")年 ";
if(cMonth<1){
tmp+="(闰)";
tmp+=monString.charAt(-cMonth-1);
}else{
tmp+=monString.charAt(cMonth-1);
}
tmp+="月";
tmp+=(cDay<11)?"初":((cDay<20)?"十":((cDay<30)?"廿":"三十"));
if (cDay%10!=0||cDay==10){
tmp+=numString.charAt((cDay-1)%10);
}
return tmp;
}
function GetLunarDay(solarYear,solarMonth,solarDay){
if(solarYear<1921 || solarYear>2030){
return "";
}else{
solarMonth = (parseInt(solarMonth)>0) ? (solarMonth-1) : 11;
e2c(solarYear,solarMonth,solarDay);
return GetcDateString();
}
}
return {getLunarDay:GetLunarDay}
}
//图片对象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.restore();
return this;
}
var _= util = {
//获取属性值
getStyle:function (obj, prop) {
var prevComputedStyle = document.defaultView ? document.defaultView.getComputedStyle( obj, null ) : obj.currentStyle;
return prevComputedStyle[prop];
},
getRandom:function(min,max){
return parseInt(Math.random()*(max-min)+min);
},
getRandomColor:function(){
return '#' + Math.random().toString(16).substr(2, 6).toUpperCase();
},
//获取鼠标信息
getOffset:function(e){
return {
x:e.offsetX,
y:e.offsetY
};
},
//循环
each:function(arr,fn){
var len = arr.length;
for(var i=0;i<len;i++){
fn(arr[i],i);
}
},
getDecimals:function(value){
return (value!=Math.floor(value))?(value.toString()).split('.')[1].length:0;
}
}
var class2type={};
_.each("Boolean Number String Function Array Date RegExp Object".split(" "), function(name) {
class2type[ "[object " + name + "]" ] = name;
});
function getType( obj ) {
return obj == null ?
String( obj ) :
class2type[ Object.prototype.toString.call(obj) ] || "undefined";
}
global.spaceMan=spaceMan;
})(window);
五、🎁更多源码
1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!
📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻