Gelynu's Blog

发表于 更新于 分类于 本文字数： 586 阅读时长 ≈ 2 分钟

必要的初始化

  1. canvas默认是一个inline-block元素，这通常会导致一些BUG产生，例如下方有空白，宽度不合理，建议将其显示为block元素

  2. 让画板覆盖全屏
    这里需要不能使用css为其设置样式，在css中设置的样式实际并没有改变画板内部的大小，只是将画布简单的放大。

    1
    2
    3
    var canvas =document.getElementById('id')
    canvas.width = document.documentElement.clientWidth
    canvas.height = document.documentElement.clientHeight

获得一个具有2D绘制功能的对象

1
var ctx = canvas.getContext('2d')

绘制图像

现在就可以开始绘制图像了
具体如何绘制可以参考官api文档，官方文档什么都有。

绘制肯定需要鼠标键盘事件了，js监听事件非常简单

1
2
3
document.onclick = function (e){
    console.log(e)
}

这里我们可以从鼠标事件中得到事件触发的相关参数，我们这里只需要clientX和clientY就可以了，它们代表鼠标点击的是当前页面窗口的位置，并不是在canvas中的位置，有时候页面会被用户改变，此时也需要让canvas自动改变

1
2
3
4
5
6
7
8
function autoSetSize(obj) {
    obj.width = getPageSize().width
    obj.height = getPageSize().height
}

window.onresize = function (param) {
    autoSetSize(canvas)
}
阅读全文 »

发表于 更新于 本文字数： 280 阅读时长 ≈ 1 分钟

hash

键值对

1
"key":value

计数排序使用的就是这个办法
复杂度O(n+max)
缺点：空间复杂度高，无法对浮点数或负数进行对比（数组下标不能为负数）

桶排序
每个里面装几个，再用其它进行排序，可以解决空间

基数排序
从个位到最高位，一级一级排列，每次都会把数字放在这个位数确定的地方
如

1
2
3
4
5
6
7
8
9
52 4554 555 6569 46444
第一次
52 4554 46444 555 6569
第二次
46444 52 4554 555 6569
第三次
52 46444 4554 555 6569
第四次
52 555 4554 6569 46444

queue(队列)

先进先出（访问）
查询快速，不好删除

stack(栈)

阅读全文 »

发表于 更新于 本文字数： 556 阅读时长 ≈ 2 分钟

什么是算法

参见维基

  • 输入：一个算法必须有零个或以上输入量。
  • 输出：一个算法应有一个或以上输出量，输出量是算法计算的结果。
  • 明确性：算法的描述必须无歧义，以保证算法的实际执行结果是精确地匹配要求或期望通常要求实际运行结果是确定的。
  • 有限性：依据图灵的定义，一个算法是能够被任何图灵完备系统模拟的一串运算，而图灵 机只有有限个状态、有限个输入符号和有限个转移函数（指令）。而一些定义更规定算法必须在有限个步骤内完成任务。
  • 有效性：又称可行性。能够实现，算法中描述的操作都是可以通过已经实现的基本运算执行有限次来实现。

算法拥有常见的范式

  • 分治法：把一个问题分区成互相独立的多个部分分别求解的思路。这种求解思路带来的好处之一是便于进行并行计算。
  • 动态规划法：当问题的整体最优解就是由局部最优解组成的时候，经常采用的一种方法。
  • 贪婪（心）算法：常见的近似求解思路。当问题的整体最优解不是（或无法证明是）由局部最优解组成，且对解的最优性没有要求的时候，可以采用的一种方法。
  • 线性规划法： 考虑多变量寻求各方权衡的最优解。
  • 简并法：把一个问题通过逻辑或数学推理，简化成与之等价或者近似的、相对简单的模型，进而求解的方法。

什么是数据结构

顾名思义，就是指指导数据怎样存储，怎样组织，数据结构通常与算法是联结在一起的的，互不可分的。

常见排序算法

参见维基

每个算法的可视化展示

阅读全文 »

发表于 更新于 分类于 本文字数： 425 阅读时长 ≈ 1 分钟

左右布局

1
2
3
4
5
<html>
<body class="clearfix">
<div class="left">左边的东西</div><div class="right">右边的东西</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
div{
  border: 1px red solid;  
}

.clearfix::after{
    content: '';
    display: block;
    clear: both;
}

.left{
  float:left;
  width:49%;
}

.right{
  float:right;
  width:49%;
}

效果见jsBin

左中右布局

中间加个inline-block的div并居中。

1
2
3
4
5
6
7
<html>
<body class="clearfix">
<div class="left">左边的东西</div>
<div class="center">中间的东西</div>
<div class="right">右边的东西</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
div{
  border: 1px red solid;  
}

.clearfix::after{
    content: '';
    display: block;
    clear: both;
}

.left{
  float:left;
  width:20%;
}

.right{
  float:right;
  width:20%;
}

body{
  text-align: center;
}

.center{
  display:inline-block;
  margin-left:auro;
  margin-right:auto;
  vertical-align: top;
}

效果见jsBin

水平居中

阅读全文 »

发表于 更新于 分类于 本文字数： 1.8k 阅读时长 ≈ 6 分钟

注意：由于Markdown会自动将换行转换为<br>标签，为了避免换行，展现实际效果时的标签事实上都在同一行,这可能会带来一些空格的差异

<div>

没有实义，主要用来分组，默认样式为块级，会单独占一行

1
2
<div>A</div>
<div>B</div>

效果：

A
B
*** # 没有实义，主要用来分组和其它作用，默认样式为内嵌，与其它元素共存。 
1
2
<span>A</span>
<span>B</span>
**效果：** AB *** # 表示一级标题，默认会加粗，二级标签使用`

`，以此类推 
1
2
3
<h1>一级标题<h1>
<h2>二级标题<h2>
<h3>三级标题<h3>
效果：

一级标题

二级标题

三级标题

# 段落元素，表示一个文本的段落 
1
<p>埃菲尔铁塔最初是作为 1889 年世界博览会的入口而兴建的。得名于设计它的著名建筑、结构师古斯塔夫·埃菲尔。埃菲尔铁塔从 1887 年开始动工，直到 1898 年才结束。是目前世界上访问人数最多的付费建筑物，每年有 700 万人登上铁塔的最高处。</p>
**效果：**

埃菲尔铁塔最初是作为 1889 年世界博览会的入口而兴建的。得名于设计它的著名建筑、结构师古斯塔夫·埃菲尔。埃菲尔铁塔从 1887 年开始动工，直到 1898 年才结束。是目前世界上访问人数最多的付费建筑物，每年有 700 万人登上铁塔的最高处。

*** # 表示强调其中的内容，内容十分重要，会自动加粗，如果只是为了加粗，将其css中的`font-weight`属性设置为`"bold"`是更好的选择。**`em`**和其类似。

由于Markdown只提供**xxx**的方式加粗文本，这被解释为<strong>xxx</strong>,所以我这里*效果：*的用法是不正确的。

1
<strong>这个文本很重要</strong>

效果：
这个文本很重要

<ul>

表示无序列表,用<li></li>来表示每一个例子/选项，与其相似的还有ol有序列表

1
2
3
4
5
6
<ul>
    <li>葡萄</li>
    <li>橘子</li>
    <li>香蕉</li>
    <li>菠萝</li>
</ul>

效果：

  • 葡萄
  • 橘子
  • 香蕉
  • 菠萝
***

<img>

显示图片，<img>是一个空标签，没有带有带/的结束标签，且它也是一个可替换标签，它的相关样式由资源自己决定。

1
<img src="/2018/03/17/Markdown%E5%85%A5%E9%97%A8/jz.png" alt="紫罗兰永恒花园">

效果：

紫罗兰永恒花园

<a>

可访问的链接，使用href指定访问的URL地址。也可以添加download属性，表示直接下载url的内容。

download属性只在当前协议为http/https时有用

href有多种状态

  1. 绝对路径
    以/开头，访问的是当前协议当前域名下的绝对地址

    1
    <a href="/2018/03/17/Markdown入门/">我的第一篇博客</a>

    效果：
    我的第一篇博客

  2. 相对路径
    使用.或..可以访问当前目录和上级目录，默认会加上./

    1
    <a href="./龙王的工作.jpg">点击查看《龙王的工作》图片</a>

    效果：
    点击查看《龙王的工作》图片

  3. 当前协议URL
    使用很当前一致的协议补全URL

    1
    <a href="//baidu.com">点击访问百度</a>

    效果：
    点击访问百度

  4. 指定协议
    输入一个完整的URL

    1
    <a href="mailto:yanglei1997630@gmail.com">给我发邮件</a>

    效果：
    给我发邮件

  5. 伪协议
    伪协议是指以javascript:为属性值，点击之后执行javascript,
    这在某些方面有特殊的作用。
    如想点击<a>

    • 为空值
      这种方法会导致重新刷新此页面

      1
      <a herf="">这会导致页面刷新</a>

      效果：
      这会导致页面刷新

    • 为#
      这种方法不会引起页面刷新，但会跳转到页面顶部

      1
      <a herf="#">这会导致跳转到页面顶部</a>

      效果：
      这会导致跳转到页面顶部

    比较好的解决办法是使用###。

    1
    <a herf="###">不会发生任何事，但地址栏会轻微改变</a>

    效果：
    不会发生任何事，但地址栏会轻微改变

    • javascript空语句
      另一个办法就是javascript为伪协议，执行一段空javascrpt语句 
      1
      <a href="javascript:;">不会发生任何事</a>
      效果：
      不会发生任何事

<iframe>

框架元素，主要用来在当前页面嵌入一个新的HTML页面，iframe几乎相当于独立的标签页，拥有自己独立的历史记录等，目前已经很少使用，不过在部分情况下仍然有用处。

1
<iframe src="http://baidu.com"><p>iframe未显示时出现的文本<p></iframe>

效果：

如想在iframe中打开你需要的页面,需要添加name属性

1
2
<iframe src="http://baidu.com" name="iframe"><p>iframe未显示时出现的文本<p></iframe>
<a href="http://qq.com" target="iframe">点击在iframe中打开qq.com</a>

效果：

点击在iframe中打开qq.com

除此之外，a标签还拥有其它target属性

  1. _black
    在新标签页打开

    1
    <a href="http://baidu.com" target="_blank">点击在新标签页内访问百度</a>

    效果：
    点击在新标签页内访问百度

  2. _self
    在本页内打开

    1
    <a href="http://baidu.com" target="_self">点击在本标签页内访问百度</a>

    效果：
    点击在本标签页内访问百度

  3. _parent
    在父级页面打开

    1
    <a href="http://baidu.com" target="_parent">访问父级</a>

    效果：
    比如页面内嵌套一个iframe，iframe内有一个在这样的标签，是在上级页面打开。

  4. _parent
    在根页面打开打开

    1
    <a href="http://baidu.com" target="_parent">访问父级</a>

    效果：
    在frame嵌套frame的多级嵌套情况下，无论嵌套多少层，总是在最开始的根页面打开。

除此之外，因为自带的iframe边框比较丑，可以通过frameborder=0来禁用。

1
<iframe src="http://baidu.com" frameborder="0"><p>iframe未显示时出现的文本<p></iframe>

效果：

*** # 表单元素，用来提交给服务器表单数据，****标签中包含有许多子标签，包括**** **** ****等等

form元素使用action确定请求的地址，使用method确定请求的方式，method拥有两种方式，分别为post和get,通过开发者工具可以方便的看见请求的类型,默认使用get请求

1
2
3
<form action="xxx" method="get">
<input type="submit" >
</form>

效果：

1
2
3
<form action="xxx" method="post">
<input type="submit" >
</form>

效果：

  1. <input>
    input拥有许多type值，常见的有text、button、submit、checkbox、radio、password、file等。

    • submit
      提交表单的内容 
      1
      2
      3
      4
      5
      <form action="xxx" method="post">
      <input type="text" name="userName">
      <input type="text" name="password">
      <input type="submit" value="登录" >
      </form>
      效果：

    其中，具有想提交内容的标签必须具有name，否则无法提交内容。
    使用get提交，会直接把内容加到路径后，使用post提交，会添加在header第四部分

    如果表单中没有form标签，没有指定type的<button>标签也具有提交功能

    1
    2
    3
    <form action="xxx" method="post">
    <button>提交<button>
    </form>

    效果：


    • checkbox
      多选框

      1
      2
      3
      4
      <span>喜欢吃的水果：<span>
      <label><input type="checkbox" name="lovaFruit" value="苹果">苹果</label>
      <label><input type="checkbox" name="lovaFruit" value="草莓">草莓</label>
      <label><input type="checkbox" name="lovaFruit" value="橘子">橘子</label>

      效果：
      喜欢吃的水果：

    • radio
      单选框

      1
      2
      3
      4
      <span>你是男孩还是女孩？</span>
      <label><input type="radio" name="gender" value="girl">女孩</label>
      <label><input type="radio" name="gender" value="boy">男孩</label>
      <label><input type="radio" name="gender" value="LGBT">跨性别者</label>

      效果：
      你是男孩还是女孩？

  1. <select>
    下拉列表，使用disabled不可选中，selected默认选中，multipl可以多选
    1
    2
    3
    4
    5
    6
    <select>
    <option selected>四川</option>
    <option>广东</option>
    <option>湖南</option>
    <option disabled>台湾</option>
    </select>

效果：

  1. <textarea>
    文本域，主要用来输入大量文本，可以使用cols指定列数，rows指定行数，但是这与字符长度不完全匹配
1
<textarea clos="50" rows="50">在这里输入</textarea>

<table>

表格标签，表格标签分别具有三部分，分别是头<thead>，身体<tbody>，脚<tfoot>，还有管内容的标签<th>，<tr>，<td>。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<table>
    <thred>
        <th>姓名</th><th>学号</th><th>成绩</th>
    </thred>
        <tr>
            <td>张三</td><td>0101</td><td>99</td>
        </tr>
        <tr>
            <td>李四</td><td>0102</td><td>98</td>
        </tr>
        <tr>
            <td>王麻子</td><td>0103</td><td>95</td>
        </tr>
    <tbody>
    </thred>
    <tfoot>
    </thred>
</table>
姓名学号成绩
张三010199
李四010298
王麻子010395

还可以通过<colgroup>及其子元素<col>指定每一列的宽度

OK
阅读全文 »

发表于 更新于 本文字数： 2.4k 阅读时长 ≈ 8 分钟

HTTP是什么？

HTTP是HyperText Transfer Protoco的缩写，中文译作“超文本传输协议”，HTTP构建在TCP传输协议的基础上，处于应用层，设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法，不过目前HTTP协议已经不仅仅只为传输HTML服务，还有其他功能，不过传输HTML仍然是最主要的。

怎样使用HTTP?

在浏览器输入输入以HTTP或HTTPS作为协议名的URL就可以了
比如：https://www.google.com.hk/search?q=URL&oq=URL

什么是URL?

URL(统一资源定位符)是URI（统一资源标识符）的子集，或者说是一种具体实现，URI的定义不太好查，我的理解是URI是为了标识某一资源使用的某种编码方法，URL是通过使用其位置的方法标识资源，URI的另一个子集URN（统一资源名）是通过给予一个唯一的编码来标识资源。

URL的具体样子

协议名://域名 端口 路径 ?查询参数 锚点

比如上文中的https就是协议名 www.google.com.hk为域名，端口这里留空，意思就是使用默认协议端口,https的默认端口为443，/search为路径，?q=q=URL&oq=URL就是请求参数，请求参数以?开头，以&来分割每一对请求参数，#为锚点，主要用来在HTML精确指定展示的段落。

回车后会发生什么？

阅读全文 »

发表于 更新于 本文字数： 1.1k 阅读时长 ≈ 4 分钟

脚本是啥？

生活中的脚本

“脚本”一词来源于演艺界，指拍摄戏剧、电影所依据的底本

公馆一室内
王妈：（小心翼翼地）小姐，您还是得注意身子，就吃点东西吧。
鸡小姐：（把碗砸在地上）不吃，我就是不吃。
（王妈下）

事先剧组写好脚本，演出时依据脚本内容，设置舞台，演员按照剧本说出台词，做出动作，还有灯光道具等等。

当然，脚本也并不局限于此。
生活中也有许多脚本，领导上台的演讲，什么时候声音大一点，小一点，表情是怎么样的；老师备课，准备预计讲什么内容，什么时候一些提出小问题，答错了怎么引导学生思考，什么时候分享小故事，什么时候刺激学生，提高学生注意……

简而言之，其实就是根据写好的计划，让对象做指定的动作，一切都在把控之中。

计算机中的脚本

计算机是个很复杂的东西，为了让人类来操控它，有最基础的处理器指令集，处理器接受到二进制的机器码，执行指定动作，然而机器码的可读性很差，人类最易理解的是自然语言，汇编就在此产生了，给这些机器码加上了名字，随着计算机能力的提高，能做的越来越多，有了更多的指令，做更多的事，汇编的代码越来越多，但是大量汇编代码在一起，是及其难懂的，为了更好的进行开发并更好的让人类理解，高级语言出现了，也就是我们目前的接触的程序语言。

高级语言的确让开发更简单容易了，但是高级语言始终需要转换成机器码，编译、链接，直到运行，需要大量的时间，这种语言被称为编译型语言，为了解决这个问题（其实还有更多原因，比如跨平台问题），解释性语言出现了，解释型语言并不把整个项目进行全部编译成机器码，而是以行为单位，逐条编译运行，脚本语言也就出现了，只需输入可读的文字命令，就能立即执行动作，所输即所得。

阅读全文 »

发表于 更新于 本文字数： 903 阅读时长 ≈ 3 分钟

前言

由于我专业原因，有大量软件都必须使用Windows,并且我的笔记本在安装Linux的过程中，总容易出现各种兼容问题，因此没有安装Windows/Linux双系统，而在Windows上使用虚拟机也不是一个太棒的选择，最后使用了win10的Linux子系统，体验感觉还行，如果在Windows平台安装失败的同学可以参照我博客的Linux部分尝试安装。

在windows上安装

准备安装的必要工具

本篇默认使用git bash作为bash环境，并且自带git，可以从这里下载安装，还需要安装node.js，可以从这里下载安装（记得勾选Add to PATH）。
我当前使用的node.js版本为v8.10.0，npm版本为5.6.0，版本不一致可能带来不可预知的错误。

进行本地安装

  1. 首先使用npm安装hexo

    1
    $ npm install -g hexo-cli

    你可以使用hexo -v查看是否安装成功

  2. 创建的博客
    使用cd跳转到一个安全的目录，例如

    1
    $ cd ~/Documents

    初始化你的博客

    1
    $ hexo init myblog

    • 这条命令执行中经常出现各种问题，可以rm -rf myblog删除这个目录重试

    • 如果经常连接github失败，建议使用系统代理

    • 仍然无法正确安装并初始化？
      可以用Linux子系统试试，参照本篇Linux部分

  3. 验证

    1
    2
    $ cd myblog
    $ npm i

    博客初始化就完成了

    现在输入

1
$ hexo server
然后在浏览器中访问`http://localhost:4000/`即可预览界面。

界面是这样的
预览图像

阅读全文 »

发表于 更新于 本文字数： 117 阅读时长 ≈ 1 分钟

书

    • 《图解http》
      已读，感觉讲的比较概括，head头的各种参数讲的比较多，基本就是去HTTP这家大商场逛一圈，知道有什么店，店里卖什么还要以后再看
    • 《黑客与画家》
    • 《只是为了好玩》
    • 《JavaScript高级程序设计》
    • 《编码》
    • 《软件随想录》
    • 《代码大全》
    • 《点石成金》
    • 《用户体验的要素》

影片

    • 《硅谷传奇》
    • 《Helvetica》
    • 《Code Rush》
      已读，看完就下载了firefox
阅读全文 »

发表于 更新于 本文字数： 1.3k 阅读时长 ≈ 4 分钟

给自己弄一个bash环境

本文所使用的系统为Linux,如果你是macOS，大多命令是相通的，你不必担心；如果你使用的是Windows 10,你可以参照此篇博客，不到10分种为你的win10安装一个Linux子系统,如果你是win8/win7/winxp，你可以参考此篇文章使用带有模拟bash环境的命令行终端。

命令行释义

打当你打开你的命令行，通常是这样的

1
user@PC:~$

或

1
2
user@PC ~ 
$
  1. user 指你当前登陆的账户的用户名。
  2. PC 是指你当前登陆的主机名。
  3. ~ 指当前你处在的目录，~代表你处在你的用户目录下。
  4. $ 指示你可以在其后输入命令并执行，并无实际意义，在部分Linux中，此符号为#。

通常我们需要在命令后输入使用文件路径进行操作，而文件路径中分为绝对路径和相对路径,我们首先要理清这两者的概念。

  1. 绝对路径
    指该文件/文件夹真实的文件路径，在windows中，我们在经常看见的"C:\Program Files\Adobe\Adobe Photoshop CC 2018"就是绝对路径。而在Linux中，没有盘符的概念，只有一个根目录/，在根目录下拥有许多分区，常见的路径是这样的/home/geylun/bilibili，因此在Linux中你可以认为以/开头的路径即是绝对路径。

  2. 相对路径
    相对路径其实只是绝对路径一种缩减的写法，方便我们进行路径输入，比如我总喜欢在我/home/geylun/下做各种操作，我不可能每次都在参数后面跟这一大串路径，相对路径这个办法就出来了，我用.代表当前目录，..代表当前目录的上级目录，~代表我的用户目录，这样在我的文件夹进行各种操作的时候，就只用输入~。

阅读全文 »
0%