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 相关文章推荐
JavaScript 弹出窗体点击按钮返回选择数据的实现
Apr 01 Javascript
js将当前时间格式转换成时间搓(自写)
Sep 26 Javascript
javascript绘制漂亮的心型线效果完整实例
Feb 02 Javascript
详解JavaScript中Hash Map映射结构的实现
May 21 Javascript
DIV+CSS+jQ实现省市联动可扩展
Jun 22 Javascript
Vue.use源码分析
Apr 22 Javascript
vue实现登陆登出的实现示例
Sep 15 Javascript
JS从非数组对象转数组的方法小结
Mar 26 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
May 16 Javascript
微信小程序使用map组件实现解析经纬度功能示例
Jan 22 Javascript
Vue 无限滚动加载指令实现方法
May 28 Javascript
npm 语义版本控制详解
Sep 10 Javascript
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
phpmyadmin MySQL 加密配置方法
2009/07/05 PHP
php入门教程 精简版
2009/12/13 PHP
Blitz templates 最快的PHP模板引擎
2010/04/06 PHP
那些年一起学习的PHP(一)
2012/03/21 PHP
php使用GD实现颜色渐变实例
2015/06/02 PHP
php实现批量修改文件名称的方法
2016/07/23 PHP
PHP7标量类型declare用法实例分析
2016/09/26 PHP
JavaScript 事件属性绑定带参数的函数
2009/03/13 Javascript
Javascript 代码也可以变得优美的实现方法
2009/06/22 Javascript
JavaScript 题型问答有答案参考
2010/02/17 Javascript
EasyUI中的tree用法介绍
2011/11/01 Javascript
window.print打印指定div实例代码
2013/12/13 Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
2014/10/11 Javascript
简介JavaScript中的setDate()方法的使用
2015/06/11 Javascript
jQuery事件绑定方法学习总结(推荐)
2016/11/21 Javascript
bootstrap使用validate实现简单校验功能
2016/12/02 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
2018/01/30 Javascript
React diff算法的实现示例
2018/04/20 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
2018/09/14 Javascript
ES6知识点整理之Proxy的应用实例详解
2019/04/16 Javascript
微信小程序扫描二维码获取信息实例详解
2019/05/07 Javascript
微信小程序封装自定义弹窗的实现代码
2019/05/08 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
2019/12/13 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
2020/07/10 Javascript
python中星号变量的几种特殊用法
2016/09/07 Python
Python2/3中urllib库的一些常见用法
2017/12/19 Python
浅谈matplotlib中FigureCanvasXAgg的用法
2020/06/16 Python
塔吉特百货公司官网:Target
2017/04/27 全球购物
联强国际笔试题面试题
2013/07/10 面试题
珍珠鸟教学反思
2014/02/01 职场文书
四年级评语大全
2014/04/21 职场文书
党的生日演讲稿
2014/09/10 职场文书
2014年小学英语教师工作总
2014/12/03 职场文书
环卫处个人工作总结
2015/03/04 职场文书
2015教师节师德演讲稿
2015/03/19 职场文书
初一年级组工作总结
2015/08/12 职场文书