canvas实现十二星座星空图


Posted in Javascript onFebruary 14, 2017

效果如下:

canvas实现十二星座星空图

代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>canvas星座</title>
 <style>
 * {
  margin: 0;
  padding: 0;
  }
 #box{
  margin:10px 0 0 10px;;
 }
 input{
  outline: none;
  font-size:16px;
 }
 p{
  margin-bottom: 10px
 }
 input[type=date]{
  height:36px;
  text-indent:10px;
 }
 input[type=button]{
  background:#3A92FF;
  color:white;
  border: none;
  height:40px;
  padding:0 10px;
  margin-left: -2px;
 }
 #canvas{
  margin-left:10px;
  background-color: #000;
  display: none;
 }
 </style>
</head>
<body>
<div id="box">
 <p>请选择您的出生日期</p>
 <input type="date" id="birth"><input type="button" id="btn" value="展示我的星空图">
</div>
 <canvas id="canvas" width="550" height="550">你的浏览器不支持canvas</canvas>
<script type="text/javascript">
 var box=document.getElementById('box');
 var birth=document.getElementById('birth');
 var btn=document.getElementById('btn');
 var canvas=document.getElementById("canvas");
 var ctx=canvas.getContext("2d");
 var g1,date,timer;
 ctx.font = "30px Courier New";
 /*星座位置*/
 var star={
 "白羊座":[
  [[0.30,0.78],[0.34,0.66],[0.28,0.48],[0.60,0.26],[0.65,0.20],[0.71,0.23],[0.70,0.32],[0.72,0.36]],
  [ [0,1,2,3,4,5],[3,6,7]]
 ],
 "天秤座":[
  [[0.16,0.67],[0.34,0.60],[0.60,0.27],[0.75,0.23],[0.84,0.47],[0.63,0.74],[0.51,0.78]],
  [[0,1,2,3,4,5,6]]
 ],
 "摩羯座":[
  [[0.78,0.21],[0.78,0.34],[0.75,0.45],[0.75,0.70],[0.69,0.78],[0.31,0.66],[0.22,0.49],[0.30,0.53],[0.53,0.54]],
  [[0,1,2,3,4,5,6,7,8,1]]
 ],
 "水瓶座":[
  [[0.45,0.21],[0.37,0.35],[0.27,0.51],[0.30,0.58],[0.29,0.64],[0.48,0.79],[0.51,0.71],[0.58,0.68],[0.73,0.74],[0.43,0.53],[0.53,0.47]],
  [[0,1,2,3,4,5,6,7,8],[2,9,10]]
 ],
 "双鱼座":[
  [[0.28,0.43],[0.28,0.53],[0.36,0.73],[0.43,0.78],[0.50,0.70],[0.53,0.62],[0.57,0.58],[0.63,0.43],[0.67,0.39],[0.74,0.39],[0.77,0.34],[0.72,0.30],[0.75,0.22],[0.23,0.50],[0.66,0.33]],
  [[0,1,2,3,4,5,6,7,8,9,10,11,12],[0,13,1],[8,14,11]]
 ],
 "金牛座":[
  [[0.29,0.21],[0.39,0.36],[0.50,0.51],[0.50,0.57],[0.61,0.63],[0.77,0.71],[0.79,0.79],[0.22,0.43],[0.39,0.57],[0.60,0.71],[0.67,0.76]],
  [[0,1,2,3,4,5,6],[7,8,3],[4,9,10]]
 ],
 "双子座":[
  [[0.18,0.37],[0.25,0.45],[0.35,0.55],[0.39,0.68],[0.49,0.77],[0.51,0.63],[0.57,0.78],[0.28,0.29],[0.42,0.32],[0.61,0.49],[0.72,0.60],[0.83,0.59],[0.69,0.75],[0.22,0.54],[0.35,0.43],[0.48,0.21]],
 [[0,1,2,3,4],[2,5,6],[7,8,9,10,11],[9,12],[13,1,14,8,15]]
 ],
 "巨蟹座":[
  [ [0.16,0.39],[0.27,0.36],[0.52,0.49],[0.57,0.65],[0.83,0.78],[0.44,0.21]],
  [[0,1,2,3,4],[2,5]]
 ],
 "狮子座":[
  [
  [0.16,0.75],[0.23,0.67],[0.39,0.77],[0.71,0.53],[0.64,0.39],[0.55,0.37],[0.47,0.27],[0.54,0.24],[0.60,0.27],[0.85,0.56]],
  [[0,1,2,3,4,5,6,7,8],[3,9]]
 ],
 "处女座":[
  [[0.16,0.59],[0.35,0.63],[0.44,0.70],[0.62,0.51],[0.77,0.46],[0.84,0.37],[0.60,0.42],[0.65,0.26],[0.34,0.75]],
  [[0,1,2,3,4,5],[3,6,7],[2,8]]
 ],
 "天蝎座":[
  [[0.17,0.50],[0.28,0.63],[0.19,0.70],[0.28,0.78],[0.41,0.77],[0.49,0.72],[0.57,0.55],[0.59,0.44],[0.69,0.31],[0.74,0.21],[0.82,0.29],[0.79,0.44],[0.73,0.50],[0.38,0.47]],
  [[0,1,2,3,4,5,6,7,8,9,10,11,12],[1,13],[8,11]]
 ],
 "射手座":[
  [[0.22, 0.66],[0.24,0.51],[0.45,0.40],[0.54,0.37],[0.59,0.43],[0.66,0.50],[0.63,0.60],[0.66,0.67],[0.74,0.53],[0.77,0.39],[0.49,0.47],[0.29,0.68],[0.30,0.78],[0.48,0.21],[0.52,0.27],[0.59,0.29]],
  [[0,1,2,3,4,5,6,7,8,9],[2,10,11,12],[10,4],[13,14,15,3],[14,3]]
 ]
 };
 /*根据出生日期获取星座信息*/
 function getStarSign(ts){
 var d=new Date(ts),sign=d.getMonth()*100+d.getDate();
 switch(true)
 {
  case sign<20:
  return "摩羯座";
  case sign<119:
  return "水瓶座";
  case sign<221:
  return "双鱼座";
  case sign<320:
  return "白羊座";
  case sign<421:
  return "金牛座";
  case sign<522:
  return "双子座";
  case sign<623:
  return "巨蟹座";
  case sign<723:
  return "狮子座";
  case sign<823:
  return "处女座";
  case sign<923:
  return "天秤座";
  case sign<1022:
  return "天蝎座";
  case sign<1122:
  return "射手座";
  default:
  return "摩羯座";
 }
 }
 /*绘制星座*/
 function constellation(ctx,ary,w,h){
 /*创建线条*/
 var points=ary[0], lines=ary[1];
 ctx.strokeStyle="#FFF";
 var len=lines.length,i,ii,line,point;
 ctx.beginPath();
 while(len--)
 {
  i=1;
  line=lines[len];
  ii=line.length;
  point=points[line[0]];
  ctx.moveTo(point[0]*w,point[1]*h);
  for(;i<ii;i++){
  point=points[line[i]];
  ctx.lineTo(point[0]*w,point[1]*h);
  }
 }
 ctx.stroke();
 /*创建小圆*/
 var cur;
 i=0;
 ii=points.length;
 for(;i<ii;i++){
  cur=points[i];
  new Circle(cur[0]*w,cur[1]*h).draw();//new出实例
 }
 }
 /*创建小圆的构造函数*/
 function Circle(x,y,r){
 this.x=x;
 this.y=y;
 this.r=r||Math.round(Math.random()*8+4);
 }
 Circle.prototype={
 draw:function(){
  ctx.beginPath();
  g1=ctx.createRadialGradient(this.x,this.y,Math.round(Math.random()*1+1),this.x,this.y,Math.round(Math.random()*3+6));
  g1.addColorStop(0,'rgba(255,255,255,.9)');
  g1.addColorStop(1,'rgba(0,0,0,.1)');
  ctx.arc(this.x,this.y,this.r,0,Math.PI*2,true);
  ctx.fillStyle =g1;
  ctx.closePath();
  ctx.fill();
  return this;
 }};
 /*点击‘展示我的星空图'按钮*/
 btn.onclick=function(e){
 clearInterval(timer);
 e.preventDefault();
 if (!birth.value){
  alert("请选择您的出生日期");
 }else{
  canvas.style.display="block";
  date = new Date(birth.value.replace(/-/g,'/')).getTime();
  timer=setInterval(function(){
  ctx.clearRect(0,0,canvas.width,canvas.height);
  ctx.strokeText(getStarSign(date), 50, 50);
  constellation(ctx,star[getStarSign(date)],canvas.width,canvas.height);
  },500);
 }
 };
</script>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jQuery autocomplete插件修改
Apr 17 Javascript
jquery.form.js用法之清空form的方法
Mar 07 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
Jun 03 Javascript
jQuery设置指定网页元素宽度和高度的方法
Mar 25 Javascript
asp知识整理笔记3(问答模式)
Sep 27 Javascript
一道面试题引发的对javascript类型转换的思考
Mar 06 Javascript
react.js使用webpack搭配环境的入门教程
Aug 14 Javascript
js传递数组参数到后台controller的方法
Mar 29 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
Apr 18 Javascript
JS中的函数与对象的创建方式
May 12 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 Javascript
Vue 数据响应式相关总结
Jan 28 Vue.js
JavaScript省市级联下拉菜单实例
Feb 14 #Javascript
jqGrid翻页时数据选中丢失问题的解决办法
Feb 13 #Javascript
jQuery实现用户输入自动完成功能
Feb 13 #Javascript
微信小程序 详解页面跳转与返回并回传数据
Feb 13 #Javascript
微信小程序 this和that详解及简单实例
Feb 13 #Javascript
脚本div实现拖放功能(两种)
Feb 13 #Javascript
bootstrap table 数据表格行内修改的实现代码
Feb 13 #Javascript
You might like
PHP filter_var() 函数 Filter 函数
2012/04/25 PHP
php获取本地图片文件并生成xml文件输出具体思路
2013/04/27 PHP
php过滤html中的其他网站链接的方法(域名白名单功能)
2014/04/24 PHP
PHP实现的下载远程图片自定义函数分享
2015/01/28 PHP
php中switch语句用法详解
2015/08/17 PHP
php实现简易计算器
2020/08/28 PHP
层序遍历在ExtJs的TreePanel中的应用
2009/10/16 Javascript
jQuery验证Checkbox是否选中的代码 推荐
2011/09/04 Javascript
Javascript判断对象是否相等实现代码
2013/03/18 Javascript
jquery获取节点名称
2015/04/26 Javascript
以Python代码实例展示kNN算法的实际运用
2015/10/26 Javascript
jQuery实现手机自定义弹出输入框
2016/06/13 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
2016/07/04 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
2016/10/26 Javascript
详解VueJs异步动态加载块
2017/03/09 Javascript
基于bootstrap写的一点localStorage本地储存
2017/11/21 Javascript
微信小程序实现自定义加载图标功能
2018/07/19 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
2018/11/06 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
2019/05/10 Javascript
JavaScript实现五子棋游戏的方法详解
2019/07/08 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&amp;平移轮播效果
2019/08/16 Javascript
PHP webshell检查工具 python实现代码
2009/09/15 Python
Python的Django应用程序解决AJAX跨域访问问题的方法
2016/05/31 Python
Python随机生成手机号、数字的方法详解
2017/07/21 Python
python实现高斯(Gauss)迭代法的例子
2019/11/20 Python
pytorch中交叉熵损失(nn.CrossEntropyLoss())的计算过程详解
2020/01/02 Python
用于ETL的Python数据转换工具详解
2020/07/21 Python
2014年法务工作总结
2014/12/11 职场文书
让生命充满爱观后感
2015/06/08 职场文书
力克胡哲观后感
2015/06/10 职场文书
2019暑期安全倡议书!
2019/06/27 职场文书
2019感恩宣传标语!
2019/07/05 职场文书
CSS3常见动画的实现方式
2021/04/14 HTML / CSS
Python深度学习之Pytorch初步使用
2021/05/20 Python
springboot中rabbitmq实现消息可靠性机制详解
2021/09/25 Java/Android
SpringBoot连接MySQL获取数据写后端接口的操作方法
2021/11/02 MySQL