HTML-Canvas的优越性能以及实际应用
目录HTML绘图届的前辈：SVGCanvas的渲染模式Dom：驻留模式Canvas：快速模式Canvas的应用优点总结HTML绘图届的前辈：SVG
Canvas是HTML5时代引入的“新”标签。与很多标签不同，Canvas不具有自己的行为，只将一组API 展现给客户端 JavaScript ，让开发者使用脚本把想绘制的东西画到一张画布上。
在HTML5之前，人们通常使用SVG ...
HTML相关知识点总结
目录简介
HTML文档和网页的关系呢？
HTML的标签样子？
HTML基本概念
标签
元素
属性
注释
编码规则
HTML常用元素
标题
段落
链接
跳转页面：
跳转锚点
图片
列表
有序列表
无序列表
定义列表
表格
块
表单及表单元素
表单
表单属性
表单元素
多媒体元素
audio 标签
video 标签
线
细节
文档类型
头文件
1. HTML <title> 元 ...
利用CSS制作3D动画
目录CSS 3D 基础知识使用 transform-style 启用 3D 模式利用 perspective & perspective-origin 设置 3D视距，实现透视/景深效果通过绘制 Webpack Logo 熟悉 CSS 3D实现文字的 3D 效果3D 氖灯文字效果利用 CSS 3D 配合 translateZ 实现真正的文字 3D 效果利用距离、角度及光影构建不一样的 3D 效果3D 计数器空间效果空间 3D ...
通过CSS数学函数实现动画特效
目录前言
CSS 数学函数
绝对值
中位数数轴上两点距离
三角函数
例子
一维交错动画
初始状态
应用动画
交错动画二维交错动画
初始状态
应用动画
交错动画另一种动画
余弦波动动画
初始状态
余弦排列
波动动画
交错动画
前言
大家好，这里是 CSS 兼 WebGL 魔法使——alphardex。
之前一直在玩 three.js ，接触了很多数学函数 ...
推荐一个好看Table表格的css样式代码详解
漂亮的table表格样式css源码漂亮的table表格样式
源码
<head>
<title></title>
<style type="text/css">
table
{
border-collapse: collapse;
margin: 0 auto;
text-align: center;
}
table td, table th
{
border: ...
基于HTTP浏览器缓存机制全面解析
目录什么是浏览器缓存非HTTP协议定义的缓存机制缓存流程图HTTP缓存机制服务端如何判断缓存已失效Last-Modified/If-Modified-SinceEtag/If-None-Match为什么有了Last-Modified还要Etag?200 OK（from cache）与304 Not Modified的区别200 OK( from cache ) 出现操作：304 Not Modified 出现操作：缓存的不同来源不能被缓 ...
HTML5(十二)——一文读懂 WebSocket 原理
一、WebSocket 由来
WebSocket 是一个持久化的协议，通过第一次 HTTP Request 建立连接之后，再把通信协议升级成 websocket，保持连接状态，后续的数据交换不需要再重复请求。websocket 可以看成一种类似 TCP/IP 的 socke t技术，在 web 应用中实现、并获得同 TCP/IP 通信一样的双向通信功能，因此客户端既和服务器可以发送 ...
CSS hack用法案例详解
之前一直很狭隘的对CSS hack持有偏见，觉得写得规范的代码不应该使用这些“邪门歪道”，可最近产品发布一个小问题却让我头疼了很久，最后查了一下资料，竟然使用CSS hack轻松解决了，不得不服啊，对付神奇的IE就得使用这些利器。
什么是CSS hack
由于不同的浏览器，甚至同一浏览器的不同版本对CSS的解析认识不一样，导致生 ...
CSS linear-gradient属性案例详解
目录一、介绍二、使用技巧2.1 方格背景2.2 棋盘效果linear-gradient是css3的一个属性，功能强大，但是因为使用的灵活性，让没接触过的人感觉不好下手，下面来一起学习一下：
一、介绍
linear-gradient 是一种实现线性渐变的属性，顾名思义，它的特点的是控制渐变，特点是线性的进行控制。
属性介绍：
linear-gradient([ ...
通过CSS实现逼真水滴动效
哈喽哈喽！CSS真的好好玩啊，哈哈，反正我是爱了，空闲写着玩。画画不好的我乐了，下面就是一个用CSS3动画完成的模仿水珠的动效，其中主要就是会使用CSS设置阴影效果以及@keyframes关键帧和一些选择器的技术，快来学习吧！！！🐬
实现效果：就很nice
你也通过一下网址进行访问水滴点击进入
灵感：看到了这张图阴 ...
CSS将div内容垂直居中案例总结
一、行高（line-height）法
如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如：
p { height:30px; line-height:30px; width:100px; overflow:hidden; }
这段代码可以达到让文字在段落中垂直居中的效果。
二、内边距（padding）法
另一种方法和行高法很相似，它同样 ...
HTML5(十一)——WebSocket 基础教程
一、为什么要学 WebSocket?
websocket 是 HTML5 提供的一种长链接双向通讯协议，使得客户端和服务器之间的数据交换更简单，允许服务端主动向客户端推送数据，并且客户端与服务端只需连接一次，就可以保持长久连接，并进行数据通信。
websocket 与 http 区别：
http 链接分为长链接、短链接，短链接是发送一个请求，返回一 ...
offsetTop用法详解
1. offsetTop：元素到offsetParent顶部的距离
2. offsetParent：距离元素最近的一个具有定位的祖宗元素（relative，absolute，fixed），若祖宗都不符合条件，offsetParent为body。如下图所示：获取child的offsetTop，图1的offsetParent为father，图2的offsetParent为body。
3. 注意：只有元素show（渲染完成）才会计算入of ...
HTML 绝对路径与相对路径概念详细
路径指文件存放的位置，在网页中利用路径可以引用文件，插入图像、视频等。表示路径的方法有两种：相对路径，绝对路径。以下讨论均是在HTML环境下进行。
相对路径
相对路径是指目标相对于当前文件的路径，网页结构设计中多采用这种方法来表示目标的路径。相对路径有多种表示方法，其表示的意义不尽相同。表示方法如下：
./ ...
HTML5(九)——超强的 SVG 动画
SVG 动画有很多种实现方法，也有很大SVG动画库，现在我们就来介绍 svg动画实现方法都有哪些？
一、SVG 的 animation
SVG animation 有五大元素，他们控制着各种不同类型的动画，分别为：
set
animate
animateColor
animateTransform
animateMotion
1.1、set
set 为动画元素设置延迟，此元素是SVG中最简单的动画元素，但是 ...
HTML5(八)——SVG 之 path 详解
path 是 SVG 基本形状中最强大的一个，不仅可以实现我们上一篇《HTML5(七)——SVG基础入门》中，介绍的 SVG 预定义的 line、rect、circle、ellipse、line、polyline、polygon 六种基本形状。还可以实现更复杂的效果，我们就开始学习 path 如何应用。
一、path 路径详解
1.1、path 命令
path 用于定义一个路径，其中命令就是 ...
HTML5(七)——SVG基础入门
声明：SVG 虽然也是标签，但它不是 HTML5，标题加了 HTML5 只是为了与 canvas 放到一起。
一、为什么要学 SVG ?
SVG 意为可缩放矢量图形（Scalable Vector Graphics），使用 XML 格式定义矢量图形。其他的图像格式都是基于像素的，但是 SVG 没有单位的概念，它的20只是表示1的20倍，所以 SVG 绘制的图形放大或缩小都不会失 ...
HTML5(六)——Canvas 高级操作
上一篇文章《HTML5(五)——Canvas API》介绍 canvas 绘制基本图形，这节开始介绍canvas的高级操作。
一、canvas 转换
canvas 转换常用的几种方法介绍，如下：
方法
描述
scale()
缩放当前绘图至更大或更小。
rotate()
旋转当前绘图。
translate()
重新映射画布上的 (0,0) 位置。
transform( ...
HTML5(五)——Canvas API
什么是 Canvas API?
Canvas API（画布）提供了一个通过 javascript 和 html 的 canvas 元素来在网页上实时绘制图形的方式。可用于动画、游戏、图标、图片编辑等多个方面。
使用前，首先需要新建在网页上新建 canvas 元素。
<canvas id="mycanvas" width="400" height="400">
您的浏览器不支持canvas！
</canvas>
上述代码 ...
html5 播放 rtsp
目前大多数网络摄像头都是通过 RTSP 协议传输视频流的，但是 html 并不标准支持 RTSP 流。除了 Firefox 浏览器可以直接播放 RTSP 流之外，几乎没有其他浏览器可以直接播放 RTSP 流。Electron 应用是基于 Chromium 内核的，因此也不能直接播放 RTSP 流。
在借助一定工具的情况下，可以实现在 Web 页面上播放 ...
