精华内容
下载资源
问答
  • 星空代码

    千次阅读 2015-11-24 11:50:34
    html> html lang="zh"> head> meta charset="UTF-8"> title>满天星title> title>曲线title> style> body { } #canvas { border: 1px solid #aaaaaa;
    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>满天星</title>
        <title>曲线</title>
        <style>
            body {
    
            }
    
            #canvas {
                border: 1px solid #aaaaaa;
                display: block;
                margin: 50px auto;
            }
        </style>
    </head>
    <body>
    <div id="canvas-warp">
        <canvas id="canvas">
            你的浏览器居然不支持Canvas?!赶快换一个吧!!
        </canvas>
    </div>
    
    <script>
        window.onload = function () {
    
            var canvas = document.getElementById("canvas");
            canvas.width = 800;
            canvas.height = 800;
            var context = canvas.getContext("2d");
    
            var sky = context.createLinearGradient(0, 0, 0, canvas.height);
            sky.addColorStop(0.0, "#000");
            sky.addColorStop(1.0, "#035");
            context.fillStyle = sky;
            context.fillRect(0, 0, canvas.width, canvas.height);
    
            for (var i = 0; i < 200; i++) {
                var R = Math.random() * 10 + 10;
                var x = Math.random() * canvas.width;
                var y = Math.random() * canvas.height;
                var rot = Math.random() * 360;
    
    
    
    
    
                drawStar(context, x, y, R/2.0, R, rot);
    
    
                              drawMoon(context, 200, 100, 200, 400, 1200, 400);
    
                context.lineWidth = 3;
                context.strokeStyle = "yellow";
                context.fillStyle = "yellow";
                context.stroke();
                context.fill();
            }
        };
    
    
        function drawStar(cxt, x, y, r, R, rot) {
            cxt.beginPath();
            for (var i = 0; i < 200; i++) {
                cxt.lineTo(
                        Math.cos((18 + i * 72 - rot) / 180 * Math.PI) * R + x,
                        -Math.sin((18 + i * 72 - rot) / 180 * Math.PI) * R + y
                );
                cxt.lineTo(
                        Math.cos((54 + i * 72 - rot) / 180 * Math.PI) * r + x,
                        -Math.sin((54 + i * 72 - rot) / 180 * Math.PI) * r + y
                );
            }
    
                cxt.closePath();
    
                cxt.lineWidth = 2;
                cxt.lineCap = "round";
                cxt.strokeStyle = "#FCFF7D";
                cxt.fillStyle = "yellow";
                cxt.fill();
                cxt.stroke();
    
        }
    
        function drawMoon(cxt, x1, y1, x2, y2 ,x3, y3) {
            cxt.beginPath();
            cxt.arc((x2 + x1) / 2, (y2 + y1) / 2, (y2 - y1) / 2, Math.PI * 0.5, Math.PI * 1.5, true);
            cxt.arcTo(x3, y3, x2, y2, (y2 - y1) / 2 / (x3 - x1) * dis(x1, y1, x3, y3));
            cxt.closePath();}
    
        function dis(x1, y1, x2, y2) {
            return Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
    
    
    
        }
    
    
    </script>
    </body>
    </html>
    
    
    展开全文
  • 0 前言5月是美国的毕业季,我...最近趁着研究python的数据可视化,顺便绘制了这张更显炫酷一些的星空主题航线图。接下来我将介绍如何用python绘制这样一张星空航线图,以下是本文的思维导图。1 plotly平台plotly(h...

    0 前言

    5月是美国的毕业季,我家领导也即将毕业了,我们将在美国进行为期两周的毕业旅行。其实类似这样的航线图我以前也用PPT绘制过,给领导用于发朋友圈,虽然总体能表达出意思,但是效果不能让自己满意,见下图。

    最近趁着研究python的数据可视化,顺便绘制了这张更显炫酷一些的星空主题航线图。

    接下来我将介绍如何用python绘制这样一张星空航线图,以下是本文的思维导图。

    1 plotly平台

    plotly(https://plot.ly/)是我们本次绘图使用的平台,它是一个用于做数据分析和可视化的在线平台,在本地运行python程序后,将在该网站你的账户中找到对应的项目,获取生成的图片。这个平台的优点是免费,图的种类很齐全,使用还算方便,而且部分图表在制作过程中可以交互操作数据。缺点是说明文档不清晰,或者说没有完全开源,只是给出一些简单用法,在编程细节方面缺失了蛮多。总得来说,我认为它是非常好用的一个数据可视化工具。

    1.1 注册账户

    在使用前首先要注册一个账户,在你的python程序中,需要定义用户名和APIkey才能正常使用。

    1.2 API-Key获取

    注册完成登录后,再右上角的setting中,进入个人账户,左边点API Keys,右边点Regenerate Key,会显示你的API Key。我们是免费版用户,每个API Key,每天有100次向平台传输数据的机会,也就是我们的python程序可以run100次。

    1.3 安装Plotly

    首先要在你的电脑上安装它,使用下面这行代码:

    然后在你的python程序最上面,导入包的时候,记得加上下面这行代码,定义你的用户名和APIKey,否则会报错:

    接着,可以用一段简单的绘图程序试一下有没有安装成功:

    运行后,如果没有报错,就说明安装成功了,信息栏会提示你去一个网站(网站地址其实就是刚才登录的那个地方)上访问生成的project,点进去就能看到生成的图以及相关数据。

    2 数据准备

    一共需要准备这些数据:美国13510城市的经纬度,旅行所到达的航站楼或是关键地点的经纬度,航班每段路线的起点与终点的经纬度。数据读取csv文件,csv格式很简单,可以用文本文档去打开,第一行是对应的项目名称,用逗号间隔,从第二行开始就是相应的每条数据,也用逗号间隔。文档名称保存成csv后缀即可。

    美国13510个城市的坐标其实是为了模拟星空的感觉,密集的地区也代表了相对比较繁华。这个数据我是在CSDN上找到的,然后经过处理保存成csv格式。这个文档我们只需要每个城市的纬度与经度,即lat和lon,如下所示:

    航站楼数据由于我们旅行的地点也不会很多,所以可以自行查经纬度自己做一个数据文件,如下所示:

    航班线路也同理,需要起点经纬度和终点经纬度:

    到这里我们就得到了这三个数据文件:

    3 航线图绘制

    接下来就是用python编写具体代码来绘制航线图。代码的主要逻辑如下,共分为五个部门。

    3.1 导入包

    导入plotly包中部分使用到的工具,导入pandas包用于数据读取,同时不要忘记设置api_key。

    3.2 数据读取

    路径根据三个数据文件所在位置进行设置。

    3.3 单元设置

    plotly绘图,其实就是你把每个你需要表达的单元单独写出来,最后在布局图纸上进行叠加,用列表来存储每个绘图单元,单元内的每个数据又是使用字典dict来存储。

    13510城市点绘制,我们选择类型是地图散点图,从数据中读取绘制位置的经纬度。mode表示你要把什么内容画出来,这里设置"markers"的含义是在这个坐标上绘制一个圆。size表示大小,color用rgb数值表示颜色,opacity是透明度。

    航站楼绘制,其实跟城市点绘制是同理的。我们为了美观,在每个点绘制了两个同心圆,调整了尺寸、颜色及透明度。

    航线绘制,首先定义一个空列表,用于后面扩充。遍历每条数据,读取起点终点的经纬度,mode选择"lines"的含义是在这两个坐标间生成曲线。

    3.4 布局设置

    布局设置就是你绘制的这些单元是在怎样的一张底图上进行的,这里我们可以选择世界地图,或者是某一个区域(比如北美洲),再或者某个国家,比如接下来我们需要选择美国。然后进行相应的参数设定。

    首先是标题设置以及是否显示图例,这里我们不需要图例所以选择False。geo里的内容就是我们这次的底图,项目类型是"albers usa",表示美国地图(albers投影)。resolution是分辨率,默认选择50即可。下面为了模拟星空的感觉,我们把湖lake的颜色跟背景background的颜色设置成相同;将陆land的颜色和洲际分界线subunit的颜色设置成相同。横轴和纵轴的设置主要调整一下显示范围,另外不需要显示网格。

    3.5 绘制

    最后我们创建一个fig,将设置好的单元赋值给data,将设置好的布局赋值给layout,用py.iplot方法即可完成绘制。

    4 美化

    绘制过程结束后,才是最重要的步骤——美化。刚画好的时候,我用的是红色航线搭配绿色陆地以及白色背景,效果如下图。

    4.1 颜色

    首先要做的是选择颜色,让整体效果看上去像星空一些,上面的代码是已经调试好的结果,其实这个过程也是挺漫长的。我一直以来做PPT选择颜色都使用的一个方法——日本颜色辞典,截取部分如下图所示。在Reference里我有挂出网址。其实也不是太好的方法,如果有伙伴有更好的主意可以私我。

    星空里星星肯定是白色的,底色用近似铁绀色的蓝(更深一点),然后陆地用近似琉璃色(更深一点),航线用近似空色。近似的意思就是rgb值在这附近微调。

    4.2 文字

    其实用python写代码是可以直接完成标注,但是字体实在是太丑,所以我没有这样选择。

    这里的文字我是在PPT里后期添加的,使用的英文字体是ADELE(需要自己下载,reference有给出地址),ADELE字体,字体纤细饱满,很有视觉效果。

    上面的地点为了突出,使用了白色填充,蓝色发光效果。

    然后在最下面加上图片的标题,整个图就大功告成了。

    5 总结

    本文介绍了使用plotly for python绘制星空主题旅游线路图的详细过程,包括plotly平台的基本使用方法,具体绘制代码解读以及后期的美化工作。图片的效果我跟我家领导还是都挺满意的(到时候朋友圈肯定会再见),后续又制作了一张新的排版用于桌面背景。

    Reference(右滑查看)

    展开全文
  • 用python画星空代码

    万次阅读 多人点赞 2020-08-01 16:20:26
    from turtle import * from random import random,randint ...screen.title("模拟3D星空") screen.bgcolor("black") screen.mode("logo") screen.delay(0)#这里要设为0,否则很卡 t = Turtle(visible
    from turtle import *  
    from random import random,randint  
    screen = Screen()  
    width ,height = 800,600  
    screen.setup(width,height)  
    screen.title("模拟3D星空")  
    screen.bgcolor("black")  
    screen.mode("logo")  
    screen.delay(0)#这里要设为0,否则很卡  
    t = Turtle(visible = False,shape='circle')  
    t.pencolor("white")  
    t.fillcolor("white")  
    t.penup()  
    t.setheading(-90)  
    t.goto(width/2,randint(-height/2,height/2))  
    stars = []  
    for i in range(200):  
        star = t.clone()  
        s =random() /3  
        star.shapesize(s,s)  
        star.speed(int(s*10))  
        star.setx(width/2 + randint(1,width))  
        star.sety( randint(-height/2,height/2))  
        star.showturtle()  
        stars.append(star)  
    while True:  
        for star in stars:  
            star.setx(star.xcor() - 3 * star.speed())  
        if star.xcor()<-width/2:  
            star.hideturtle()  
            star.setx(width/2 + randint(1,width))  
            star.sety( randint(-height/2,height/2))  
            star.showturtle()
    
    展开全文
  • 它的通用性可以把存放在一台电脑中的文本或图形与存放在另一台电脑中的文本或图形方便地联系在一起,形成有机的整体,我们以具体的运用为例了解一下html,学习怎么操作html星空特效代码?1、在页面中引入jquery和...

    html不是一种编程语言,而是一种标记语言 ,是网页制作所必备的。这些代码式的专业语言我们在普通的工作中运用的非常少,它的通用性可以把存放在一台电脑中的文本或图形与存放在另一台电脑中的文本或图形方便地联系在一起,形成有机的整体,我们以具体的运用为例了解一下html,学习怎么操作html星空特效代码?

    1、在页面中引入jquery和jquery.warpdrive.min.js文件。

    e41ef00eaa08cdeb1b3a286fba3bb484.png

    2、HTML结构

    使用空的一个

    元素来作为星空背景的容器。

    61dbaca08c99e44d39fac75caf4ad370.png

    3、初始化插件

    在页面DOM元素加载完毕之后,可以通过纯js的方法来初始化该星空背景插件,或将它作为一个jquery插件来使用。

    作为jquery插件来使用。

    cc35a3fff6c4df60adbb1d675c12449f.png

    4、通过js方法来使用。

    dc3d721f08dc5922f66cabc89a997fde.png

    5、该html5星空背景特效插件的可用配置参数如下:

    dd98c2ac401485a18c419c3658fc9596.png

    47c38065d874c293f9a50bf365aee093.png

    6、以jquery插件的方式来调用配置参数:

    ec7b18ef46e906ae67f00e16c1502981.png

    7、通过纯js的方法来调用配置参数:

    ea7c15c67cd9b46fdb630400507eea99.png

    8、该html5星空背景特效插件有两个可用的方法用于暂停和继续播放星空动画。

    暂停jquery:

    2b09e0115ac0131bdbef5af57176858c.png

    继续js:

    eca4527848eddc1c15b317c1485b68cd.png

    用上边的方法就可以通过操作html代码制作出星空特效了,它是一种简单、通用的标记语言。它允许制作的这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。大家课下可以使用html代码制作出更多的特效图进行练习。

    本篇文章使用以下硬件型号:联想小新Air15;系统版本:win10;软件版本:HTML5 。

    展开全文
  • 旋转的星空特效代码蓝叶网站设计2016-08-02133990评论html5特效代码旋转的星空,首先要设置背景为暗一点的背景色或者图片,例如设置成黑色的背景颜色,然后把代码复制到html文件里,设置下下方JS里的一些设置,如...
  • 用Python显示真实的星空还是先上图本文讲怎样画出真实的星空。预备知识如果想显示真实的星空,首先你得有真实恒星的位置坐标和亮度标记。它的基本格式如下:{'long': 0.023278328898474372, 'lat': -0....
  • HTML5绘制一个很丑的星空canvas{display: block;border:1px dotted skyblue;}HTML5绘制星空var nimo={};window.onload=function(){nimo.canvas=document.getElementById('canvas');nimo.context=nimo.canvas....
  • 星空特效代码

    2018-10-17 17:54:15
    一段通过canvas渲染的星空特效代码,该代码可以做为炫酷的页面背景
  • 利用c语言绘制漫天星空-动画

    万次阅读 多人点赞 2016-02-18 21:26:41
    代码: // 程序名称:星空 // 编译环境:Visual C++ 6.0,EasyX 2011惊蛰版 // 最后更新:2009-2-22 // #include #include #include #define MAXSTAR 200 // 星星总数 struct STAR { double x; int y; ...
  • 小型星空代码(CSS+HTML+JS)
  • 星空特效代码js

    2018-10-16 11:07:33
    一段用js星空特效代码,通过调整,可以做为页面背景使用
  • 7mr少儿编程网-Scratch_Python_教程_免费儿童编程学习平台用python画星空代码是什么?7mr少儿编程网-Scratch_Python_教程_免费儿童编程学习平台用python画星空代码是7mr少儿编程网-Scratch_Python_教程_免费儿童...
  • html+css+js实现星空特效

    万次阅读 多人点赞 2020-09-04 22:02:39
    废话不多说直接上代码,效果是一个星空旋转和文字逐渐出现的效果,文字是逐渐出现的,星空中的小球是旋转的 效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <...
  • 用python画星空代码是什么?用python画星空代码是from turtle import *from random import random,randintscreen = Screen()width ,height = 800,600screen.setup(width,height)screen.title("模仿3D星空")...
  • 今天给各位带来的是 HTML5+JS全屏星空特效源码!有想要文件版源码的能私聊小编哦!废话不多说,上源码!CSS:body {margin:0 auto;overflow:hidden;}/*=============第一页=============*/.header{margin:0 auto;...
  • 绘图之前先要安装turtle模块 python 2: pip install turtle python 3: pip3 install turtle 1.小猪佩奇: #!/usr/bin/env python2 # coding=utf-8 import turtle as t t.pensize(4) ...t.color((255...
  • 脚本代码(For Alixixi.com)如下:用HTML5绘制的一个星空特效图canvas{display: block;border:1px dotted skyblue;}body{font-family: 微软雅黑;}用HTML5绘制的一个星空特效图var nimo={};window.onload=function(){...
  • Python画好看的星空图(唯美的背景)

    万次阅读 多人点赞 2020-05-17 20:30:23
    用Python中的turtle库绘制3D星空图。
  • 背景动态星空H5特效源代码

    万次阅读 2020-10-23 18:02:41
    背景动态星空H5特效源代码代码已经在下面点个关注呗! <!--name:sanlang from:internet model web function:a login page with starts --> <!DOCTYPE HTML> <html> <head> <...
  • 这是“罗盘时钟”星空版的全部源代码,具体效果我在博客中已经展示了,还不错,可以根据背景,自己随便再去修改哈!需要的朋友可以下载!!!
  • html5星空背景的登录页面带粒子特效代码帮运工一枚,仅供学习,不供商用
  • Python画好看的星空

    万次阅读 多人点赞 2020-04-06 11:39:43
    用Python中的turtle库绘制3D星空图。
  • 星空样式(HTML)

    千次阅读 2020-10-11 19:12:30
    星空样式写法 引入jquery库 css样式代码 js部分 一:引入jquery库 <head> <script src="jquery-1.10.2.min.js"></script> </head> 二:css样式代码 body { /* 径向渐变 第一个参数是位置...
  • Python浪漫表白源码(附带详细教程)

    万次阅读 多人点赞 2018-12-01 10:12:37
    要知道我们程序猿也是需要浪漫的,小博我之前在网上搜寻了很多代码缺发现好多都不是最新的,所以自己就整理了一下代码,现在与广大博友们分享下 我们需要用到的包 使用pip install +(包名) turtle 2.random ...
  • ​   来源:百度动图 我发现网上有很多得很好的Python表白代码,感觉绘出来的图很漂亮。我整理了一下,挑了一些我觉得不错的代码和部分自认不错的原创分享给大家(这些我都测试过,确实可以生成喔~),选一种...
  • html5 星空

    2018-08-22 15:01:03
    html5 星空 粒子急速运动 鼠标放到星空上,粒子会随着时间推移运动越来越快。改变鼠标方向,粒子运动方向随之改变
  • 利用Python turtle库制作夜空

    千次阅读 多人点赞 2019-11-17 21:53:27
    代码 from turtle import * from random import random , randint screen = Screen ( ) width , height = 800 , 600 screen . setup ( width , height ) screen . title ( "两情若是久长时,又...
  • 星空背景源码

    千次阅读 2018-06-08 09:59:21
    星空背景 <!-- 用户名: 提交"> --> <!-- Html代码 --> <canvas id="canvas"></canvas> <canvas id="snow"></canvas> ; bottom: 0px;"> <!-- CSS代码 --> canvas {...
  • python热力图——“星空代码

    千次阅读 2020-03-27 18:59:49
    描述 使用python,生成一个由随机数据构成的热力图 ...女朋友:你生成的是星空代码 #encoding: utf-8 from pyecharts.charts import Geo from pyecharts import options from pyecharts.globals impor...
  • 效果图(仔细看会有星空效果和粒子效果);背景可以放到任意页面中 代码: <html lang="en"><head> <meta charset="UTF-8"> <title>登录</title> <style> *{ margin: 0; ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,845
精华内容 5,538
关键字:

代码写星空