canvas 笔记
canvas 笔记
canvas教程
一. 概述
长久以来,web上的动画都是Flash。比如动画广告、游戏等等,基本上都是F1ash实现的。Flash是有缺点的,比如需要安装 Adobe Flash Player,漏洞多,重量比较大。卡顿和不流畅等等
1.1 简介
HTML5提出了一个新的 canvas标签,彻底颠覆了Flash的主导地位。无论是广告、游戏都可以使用 canvas实现了, Canvas是一个轻量级的画布,我们使用 Canvas进行 JavaScript的编程,不需要增加额外的插件,性能也很好,不卡顿,在手机中也很流畅
二. 基本使用
123<canvas width="400" height="500" id="mycanvas"> 当前浏览器版本不支持,请升级浏览器</canvas>
canvas的标签属性只有两个, width和 height.。表示的是 canvas画布的宽度和高度。注意 canvas的 width和 height不要用css的样式来设置,如 ...
SassScript
SassScript相关介绍
一、CSS预处理器出现的原因
无法嵌套书写导致代码繁重、冗杂、逻辑混乱。
没有变量和样式复用机制,属性值只能以字面量的形式重复输出。
12# 总结:代码复用性低;不易于维护# 注:现在,现在的CSS是可以定义变量的!!!
12345/* 原生css 变量定义 */:root{ --red: #f3e1e1;}var(--red)
二、出名的CSS预处理器介绍
1. SCSS/SASS
SASS (.scss)。于2007年诞生,最早也是最成熟的CSS预处理器,拥有ruby社区的支持和compass这一最强大的css框架,目前受LESS影响,已经进化到了全面兼容CSS的SCSS。
2. LESS
LESS (.less)。于2009年诞生,借鉴了SASS的长处,并兼容了CSS语法,使得开发者使用起来更为方便顺手,但是相比于SASS,其编程功能不够丰富,反而促使SASS进化成为了SCSS。
3. Stylus
Stylus (.styl)。于2010年诞生,出自Node.js社区,主要用来给Node项目进行CSS预处 ...
CSS动画
CSS动画
动画基础
阴影
文字阴影
123456789/* text-shadow:阴影1,阴影2,... 阴影格式: 参数1:横向偏移位置 参数2:纵向偏移位置 参数3:模糊度 参数4:颜色*/text-shadow: 5px 10px 3px red,5px 10px 3px blue;;
盒子阴影
1234567/* 盒子阴影 box-shadow 格式:box-shadow:阴影1,阴影2,.. 阴影格式: 水平偏移位置,垂直偏移位置,模糊度,外延值,颜色,内置阴影*/ box-shadow: 5px 5px 3px 5px #ccc inset;
渐变 (gradients)
线性渐变 (Linear gradients)
语法
1234background-image: linear-gradient(direction, color-stop1, color-stop2, ...);/* ...
链表学习笔记
链表 (Linked List)学习笔记
介绍
链表是以节点的方式来存储,是链式存储
每个节点包含 data 域, next 域:指向下一个节点.
链表的各个节点不一定是连续存储
链表分带头节点的链表和没有头节点的链表,根据实际的需求来确定
链表是有序的列表,在内存中是存储如下
单链表介绍
单链表(带头结点) 逻辑结构示意图如下
队列学习笔记
队列学习笔记
案例
银行排队
队列介绍
队列是一个有序列表,可以用数组或是链表来实现。
遵循先入先出的原则。即:先存入队列的数据,要先取出。后存入的要后取出
数组模拟队列
队列本身是有序列表,若使用数组的结构来存储队列的数据,则队列数组的声明如下图, 其中 maxSize 是该队列的最大容量
因为队列的输出、输入是分别从前后端来处理,因此需要两个变量 front及rear分别记录队列前后端的下标,front 会随着数据输出而改变,而 rear则是随着数据输入而改变,如图所示:
数组模拟环形队列
思路分析
ront 变量的含义做一个调整: front 就指向队列的第一个元素, 也就是说 arr[front] 就是队列的第一个元素
front 的初始值 = 0
rear 变量的含义做一个调整:rear 指向队列的最后一个元素的后一个位置. 因为希望空出一个空间做为约定.
rear 的初始值 = 0
当队列满时,条件是 (rear + 1) % maxSize == front 【满】
对队列为空的条件, rear == front 空
当我们这样分析, 队列 ...
稀疏数组学习笔记
稀疏数组
实际需求
使用二维数组记录会产生很多无意义的数据,上图的数组产生了很多的0
使用稀疏数组解决
稀疏数组处理步骤
记录数组一共有几行几列,有多少个不同的值
把具有不同值的元素的行列及值记录在一个小规模的数组中,从而缩小程序的规模
代码实现
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293package top.lcopilot.sparseArr; public class SparseArray{ public static void main(String[] args) { //创建一个原始的二维数组11*11 //0: 表示没有棋子, 1: 表示黑子, 2:表示蓝子 int chessArr1[][] = new int[ ...
数据结构基本介绍
数据结构
数据结构包括:线性结构和非线性结构。
线性结构
线性结构作为最常用的数据结构,其特点是数据元素之间存在一对一的线性关系
线性结构有两种不同的存储结构:即顺序存储结构(数组)和链式存储结构(链表)。
顺序存储的线性表称为顺序表,顺序表中的存储元素是连续的。
链式存储的线性表称为链表,链表中的存储元素不一定是连续的,元素节点中存放数据元素以及相邻元素的地址信息
线性结构常见的有:数组、队列、链表和栈
非线性结构
非线性结构包括:二维数组、多维数组、广义表、树结构、图结构
数据结构和算法可视化网站
ES6:promise、async的理解
前言
文本主要内容:
Promise(比较重要)
Symbol
async函数
Promise
概述
Promise对象: 代表了未来某个将要发生的事件(通常是一个异步操作)。
ES6中的promise对象, 可以将异步操作以同步的流程表达出来,很好地解决了回调地狱的问题(避免了层层嵌套的回调函数)。在使用ES5的时候,在多层嵌套回调时,写完的代码层次过多,很难进行维护和二次开发。
回调地狱的举例
假设买菜、做饭、洗碗都是异步的。
现在的流程是:买菜成功之后,才能开始做饭。做饭成功后,才能开始洗碗。这里面就涉及到了回调的嵌套。
ES6的Promise是一个构造函数, 用来生成promise实例。
promise对象的3个状态
初始化状态(等待状态):pending
成功状态:fullfilled
失败状态:rejected
使用promise的基本步骤
(1)创建promise对象
(2)调用promise的回调函数then()
代码格式如下:
123456789101112131415161718192021222324let promis ...
Git常用命令
Git常用命令
基础命令
123456789101112131415161718192021222324跟github建立链接(电脑里面要安装git)gitk 打开图形界面git clone 地址git status(看状态)git add.(提交)git commit -m ‘初始化项目’ (提交到本地)git commit --amend 追加提交git push(提交到服务器)git push origin master -f 强制推送 or 我们只需加上 --rebase 参数然后再重新 push 一次即可git pull origin master (拉取)git push -u origin master 将本地的master分支推送到origin主机,同时指定origin为默认主机,后面就可以不加任何参数使用git push了。git fetch <远程主机名> <分支名> //这个命令将某个远程主机的更新全部取回本地git pull 相当于git fetch origingit merge origin/ma ...
设计模式
设计模式
介绍
设计模式是程序员在面对同类软件工程设计问题所总结出来的有用的经验,模式不是代码,而是某类问题的通用解决方案,设计模式(Design pattern)代表了最佳的实践。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。
设计模式的本质提高 软件的维护性,通用性和扩展性,并降低软件的复杂度。
<<Design pattern>> 是经典的书,作者是Erich Gamma、Richard Helm、Ralph Johnson和 John Vlissides Design(俗称 “四人GOF”)
设计模式并不局限于某种语言,java,php,c++ 都有设计模式.
设计模式类型
设计模式分为三种类型,共23种
**创建型模式: **单例模式、抽象工厂模式、原型模式、建造者模式、工厂模式。
结构型模式: 适配器模式、桥接模式、装饰模式、组合模式、外观模式、享元模式、代理模式。
行为型模式: 模版方法模式、命令模式、访问者模式、迭代器模式、观察者模式、中介者模式、备忘录模式、解释器模式(Interpreter模式 ...