html5新特性与用法大全了解一下

有好多小伙伴私聊我问我html5新特性和用法，下面我给大家具体介绍一下html5都新加了哪些新特性，下面我给大家总结一下。

1)新的语义标签 footer header 等等
2）增强型表单表单2.0
3）音频和视频
4）canvas 绘图
5） SVG绘图
6）地理定位
7）拖放API
8）web worker 用来执行耗时任务
9）web Storage 在浏览器端存储大量数据
10）web Socket 一种持续性的连接（非http协议）

（一）新型的语义标签就不说了，

例如<footer></footer>

（二）增强型表单表单2.0

一、

1）新的input type h4和h5对比！
              H4中input type ：text /password /radio /checkbox/ sybmit/ reset / file /hidden / image/
              H5中的input type ：email/url/number/tel/search /range /color/month/week /date

2）新的表单元素
              H4中表单元素：input/textarea/select，option/label
              H5中新增的表单元素：datalist /progress/meter/output

二、h5中新增的表单元素 -- datalist 建议列表

       <datalist id="lunchList">

 		<option>京酱肉丝</option>

 		<option>锅包肉</option>

 		<option>鱼香肉丝</option>

 		<option>青椒肉丝</option>

 		<option>地三鲜</option>

 	</datalist>

 	请输入您需要的午餐：<input type="text" name="lunch" list="lunchList"/>

四、h5中新增的表单元素 -- progress 进度条
有两种形式：
bootstrap里面有progress插件样式

<form>

	网络连接中<progress></progress>

	<br/>

	<!-- 0-1之间 -->

	下载进度 <progress id="p3" value="0"></progress>

	<input type="number" value="1">

</form>

<script type="text/javascript">

	/*settimeout和setInterval区别在于settimeout执行一次，setInterval每隔一段时间执行一次*/

	var t=setInterval(function(){

       var v = p3.value;

       v += 0.1;

       p3.value = v;

       if(v>=1){

       	clearInterval(t);

       	alert("下载完成");

  		 }

	},500); 

</script>

五、h5中新增的表单元素 -- meter

<body>

	机油含量：<meter id="m1" min="0" max="100" low="30" high="70" optimum="40" value="50"></meter>

	PM值：<meter id="m2" min="0" max="500" low="100" high="300" optimum="150" value="750"></meter>

</body>

meter:度量衡/刻度尺/，用于标示一个所处的范围：不可接受（红色）/可以接受（黄色）/非常优秀（绿色）

  <meter min="可取的最小值" max="可取的最大值" low="合理的下限值" high="合理的上限值" optimum="最佳值" value="当前值" ></meter>
3) 表单元素的新属性
  一、H4中表单元素的属性：<input>
              id/class/title/type/value/name/style/readonly/disabled/checked/
              H5中表单元素的新属性
  1）placeholder：占位字符作为提示不可提交
              <input value=“tom” placeholder=“请输入用户名”/>
  2）autofocus：自动获取输入焦点 (不用点一下就可以输入只第一个input设置的才有效)
              <input autofocus>
  3） multiple : 允许输入框中出现多个输入值用逗号分隔 a@dn.com，b@dn.com
              <input type="email" name="emails" multiple>
  4)form :用于把输入域放置到FORM外部
              <form id="f5"></from>
              <input form="f5">
=================输入验证相关的新属性==================================
  例子查看input验证相关的属性/yz.html
              5)required :必填项，内容不能为空
              6）maxlength：指定字符串的最大长度
              7）minlength：指定字符串的最小长度
              8）max：指定数字的最大值
              9）min：指定数字的最小值
              10）pattern：指定输入必须符合的正则表达式
上述验证属性会影响表单元素对应的js对象的validity属性，validity属性是验证的属性。

(三） video 视频和音频

1.flash被H5取代体现在哪些方面？
              flash 绘图（AS/FLEX） =>Canvas/SVG
              flash 动画 => 定时器+Canvas
              视频和音频播放 => VIDEO/AUDIO
              flash 客户端存储 => WebStorage
  2.H5新特性 ——视频播放器（是个行内块元素。可以给宽高）
              H5提供了一个新的标签用于播放视频：

<video src=""></video>

<video src="">

<source src="res/birds.mp4"></source>

<source src="res/birds.ogg"></source>

<source src="res/birds.webm"></source>

您的浏览器不支持VIDEO播放！
</video>
它本身是一个300*150的行内块元素
备注：写多行source是为了兼容各个浏览器。因为浏览器对视频格式支持不统一，有些浏览器例如有些浏览器支持mp4格式，那么它就播放第一个mp4格式的视频，如果它不支持就检查是不是支持下面的ogg视频，如果支持就播放，不支持的话继续向下，下面没有source了，那么就显示“您的浏览器不支持VIDEO播放！”。

VIDEO标签/对象常用的成员：
成员属性：<video id="v2" src="" autoplay controls loop muted poster="2.jpg" preload="auto"></video>
autoplay：false，是否自动播放默认false
controls：false，是否显示播放控件，默认为false
loop：false ，是否循环播放，默认为false
muted：false，是否静音播放，默认为false
poster：''，在播放第一帧之前显示的海报，可以是图片。默认为空没有
preload：视频预加载策略，可取值：
auto：预加载视频的元数据以及缓冲一定时长，绝对不可以在手机端使用
（尺寸/时长。第一帧内容，缓冲时长）（预加载浪费流量）
metadata：仅预加载视频的元数据（尺寸/时长，第一帧内容，）没有缓冲时长，适合手机
none：不预加载任何数据

-----------------------------------------------------------------
id v2的属性用法例如：v2.playbackRate=3;
currentTime:当前播放的时长
duration:总时长
paused:true,当前视频是否处于暂停状态 true是暂停，false是播放
volume：1 默认值是1，当前音量
playbackRate：1 ，回放速率大于1表快放，小于1表慢放

id v2的方法：
play（）：播放视频
pause （）：暂停播放
成员事件：
onplay：当视频开始播放时触发的事件
onpause：当视频暂停时触发的事件
练习：不使用video自带的controls，自定义播放/暂停按钮
鼠标移出视频区域隐藏按钮；鼠标移入显示按钮例如：视频音频、canvas/video.html
当暂停就显示广告，播放就隐藏广告

3、H5新特性 ——音频播放器

<audio src=""></audio>

<audio src="">

<source src="res/birds.mp3"></source>

<source src="res/birds.ogg"></source>

<source src="res/birds.wav"></source>

属性方法和视频一样，只不过没有海报属性
***判断复选框是否√选
cb.onchange=function(){
this.checked true为选上，false为没选
}

（四）、canvas

每个画布上有且只有一个“画笔”对象 ———称为“绘图上下文”对象——使用该对象进行绘图！
var ctx = canvas.getContext('2d') //现在只有2d的得到画布上的画布对象

canvas绘图 ---难点！！！
1）SVG绘图：矢量绘图技术，2000年出现，后纳入H5标准
2）Canvas绘图：位图绘图技术，H5提出的绘图技术
3）WebGL绘图：3D绘图技术，尚未纳入H5标准

canvas绘图技术
canvas：画布，H5实现2D绘图技术
<canvas width="500" height="400">您的浏览器不支持canvas</canvas>
canvas标签在浏览器默认是300*150的inline-block。画布的宽高只能使用HTML/JS属性来赋值，不能使用css样式赋值！
每个画布上有且只有一个“画笔”对象 ———称为“绘图上下文”对象——使用该对象进行绘图！
var ctx = canvas.getContext('2d') //现在只有2d的得到画布上的画布对象
1）使用canvas绘制矩形
绘制矩形

ctx.lineWidth = 1 描边宽度

ctx.fillStyle='#000' 填充样式颜色

ctx.strokeStyle='#000' 描边样式颜色

ctx.fillRect(x,y,w,h); //填充一个矩形 x ,y坐标 w，h 宽高

ctx.strokeRect(x,y,w,h); //描边一个矩形

ctx.clearRect(x,y,w,h) 清除一个矩形范围内所有的绘图

2）使用canvas绘制文本
一段文字的定位点在其文本基线的起点

ctx.textBaseline = 'alphabetic' //文本基线 默认值是第三根线

ctx.font="12px sans-serif" //字体大小和样式

ctx.fillText(str,x,y) //填充

ctx.strokeText(str,x,y) //描边一段文本

ctx.measureText(str)  //基于当前文字大小字体设置测量文本,返回的对象是{width：x}

3）使用canvas绘制路径
path:类似于ps中的“钢笔工具”，由多个坐标点组成的任意形状，路径不可见，可用于“描边”、
“填充”，“裁剪”。

ctx.beginPath() //开始一条新路径

ctx.closePath() //闭合当前路径

ctx.moveTo(x,y) //移动到指定点

ctx.lineTo(x,y) //从当前点到指定点画直线

ctx.arc(cx,cy,r,start,end) ； //绘制圆拱路径

//cx cy 是圆心坐标xy r是半径 ，start 开始角度，end结束角度

角度制：360 = 弧度制：2PI
180 = 1PI
例如

ctx.arc(100,200,30,0,2*Math.PI)

ctx.stroke(); //当前路径描边

ctx.fill(); //当前路径填充

ctx.clip();// 使用当前路径进行裁剪

//*********连接处的角***********

ctx.lineJoin='miter' //线的连接处出现尖角

ctx.lineJoin='round' //线的连接处出现圆角

ctx.lineJoin = 'bevel' //线的连接处出现方角

4）使用canvas绘制图像
canvas属于客户端技术，图片在服务器中，所以浏览器必须先下载要绘制的图片，
且等待图片异步加载完成：

var img = new Images();

img.src='x.png';

console.log(img.width); //0 异步请求图片

img.onload=function(){

console.log(img.width,img.height); //有值 图片加载完成

//开始绘制图片到画布上

ctx.drawImage(img,x,y); //原始大小绘图

ctx.drawImage(img,x,y,w,h); //设置宽高

}

监听鼠标在画布上方移动事件

ctx.onmousemove = function(e){

x=e.offsetX;

y=e.offsetY;

console.log(x,y);

}

2、canvas绘图中渐变
线性渐变：linearGradient
径向渐变：radialGradient
可以参考ps中渐变效果、

var g = ctx.createLinearGradient(x1,y1,x2,y2);

g.addColorStop(0,'#f00');

g.addColorStop(0.5,'#ff0');

g.addColorStop(1,'#0f0');

ctx.strokeStyle=g;

难点：坐标系坐标轴、单词比较多

3、绘图变形

ctx.rotate(弧度) //旋转绘图上下文对象（即画笔），轴点是画布的原点

ctx.translate(x,y) //将整个画布的原点平移到指定的点

ctx.sava(); //保存画笔当前的所有变形状态值（游戏中从存盘）

ctx.restore(); //恢复画笔变形状态到最近的一次保存（游戏中读取存盘）

ctx.save();//先保存原始状态

var deg = 10*Math.PI/180; //要旋转的角度 旋转10度

ctx.rotate(deg); //旋转

ctx.drawImage(img,0,0); //画图 ，画笔是歪的 画什么都是歪的

ctx.restore();// 取出存盘时保存的原始状态

（五）SVG绘图

先来了解一下什么是位图和矢量图。简单了解一下就可以。

位图：由一个又一个像素点组成，每个点各有自己的颜色，色彩细腻。
矢量图：由一个又一个线条组成，每个线条可以指定颜色，方向，可以无限缩放，但颜色细节不够丰富

一、SVG绘图使用标签进行绘图，可以直接绑定事件监听

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">

   <rect width="100" height="100"></rect>

</svg>

二、如何js创建一个svg标签！

//var r1 = document.createElement('rect'); 创建不了这个svg元素 因为有年限和命名空间  （就是说这样不行 要用下面的方法创建！！！！）

var r1= document.createElementNS('http://www.w3.org/2000/svg','rect');

r1.setAttribute('width','50');

r1.setAttribute('height',300);

s1.appendChild(r1);

三、svg创建椭圆

<svg width="300" height="200" id="c6">

  <ellipse rx="100" ry="40" cx="100" cy="100" fill="#faa" stroke="#a00"></ellipse>

</svg>

四、svg创建直线

<svg width="300" height="200" id="c6">

  <line x1="0" y1="0" x2="100" y2="200" stroke="#000" stroke-width="50" stroke-linecap="square"></line>

</svg>

注：stroke-linecap="square"有多出来的方形，stroke-linecap="round"多出来圆形的区域，stroke-linecap="butt"不出来多方形（也就是说你创建的直线设置这些属性头尾有区别！自己试一下就知道了！细节很重要！）

五、svg创建折线

<svg width="300" height="200" id="c6">

  <polyline points="50,50 100,300 150,100"></polyline> //出来的是三角形

  <polyline points="50,50 100,300 150,100" fill="transparent" stroke="#000"></polyline> //出来的是折线

</svg>

六、地理定位（以后不用客户端，我们也可以自己定位咯！）

Geolocation：地理定位，使用JS获取当前浏览器所在的地理坐标（经度，维度，海拔，速度）
数据，用于实现LBS应用（Location Based Service），如饿了么，高德导航...
手机浏览器如何获得定位信息：
1）首选手机中的GPS芯片与卫星通信，定位精度在米
2）次选手机基站进行定位获取，定位精度在公里（违法的）
PC浏览器如何获得定位信息：
1）通过IP地址进行反向解析，定位精度取决于IP地址库的大小

HTML5中提供了一个新的对象，用于获取当前浏览器的定位信息：

window.navigator.geolocation{

  getCurrentPosition:fn, //获得当前定位信息

  watchPosition:fn, //监视定位数据的改变

  clearWatch ：fn // 取消监视

}

2、扩展：在网页中如何嵌入百度地图
1）注册百度开发者账号 map.baidu.com ---> lbsyun.baidu.com
2）创建一个网站；登录百度地图，为网站申请一个地图的AccessKey
3）在自己的网页中嵌入百度地图提供的API，嵌入百度地图

这里不多讲这个如何嵌入了！（要记住用百度地图必须注册账号，然后引用人家的库就对了！）

七、拖放API

前面有讲过拖放：小伙伴们自己往前找一下以前的博客。

八存储

存储主要就是cookie和session（前面一找一大堆的写法我讲一下区别吧还有注意事项）：要记住session是关了浏览器就消失的，cookie是关了浏览器也不消失的！注意注意：cookie存储时候必须加时间、不加时间的话关闭浏览器之后同样消失！这浏览器存储利用起来解决了很多功能问题比如记住密码等功能！！

九 web Socket

这个东西说不说呢。。。。。还是稍微简单的讲一下吧，全靠领悟啊~~

web socket 是一个可以在服务器与客户端之间建立一个非http的双向连接！

这个连接是实时的，也是永久的。

服务器可以主动推送消息。

服务器不在需要轮询客户端的请求，服务器与客户端之间通信无需重新建立连接。

也就是可持续性的来回通讯。

如何创建呢？一段代码搞定

var webSocket = new WebSocket （“ws://localhost:8005/socket”）;

//url 必须以“ws” 或者“wss” 文字作为开头：因为不是http  是websocket吗，人家自己的标识，加密传送，记住就好了。

webSocket.send() //发送文本数据，只可以发送文本。（使用json对象把js对象转换文本数据后进行发送）

webSocket.close();//关闭切断通讯连接。

webSocket.onmessage= function(event){

　　var data=event.data;

}  // 接收服务器传来的消息

webSocket.onopen =function(event){

　　//开始通讯时的处理

}

webSocket.onclose =function(event){

　　//通讯结束时的处理

}

如有不足之处请大神指正！！欢迎技术交流。

html5新特性与用法大全了解一下的更多相关文章

web全栈架构师[笔记] — 03 html5新特性
HTML5新特性一.geolocation PC端精度比较低通过IP库定位移动端通过GPS window.navigator.geolocation 单次 getCurrentPositio ...
第二季第八天 HTML5新特性
在函数内部window.a = a 在全局中就可以拿到这个变量变量命名.作为函数的参数的时候要详细.调用的时候可以简单点做全局变量的两个方案 1.绑在标签上data 2.闭包视频一般都是二进 ...
html5新特性
这一篇博文不会告诉你怎么去使用html5的新特性,只会给你总结一下新特性------对于好学的人可以把这篇文章当做一个目录对于初接触的人来说是一个导向对于已经接触过的人来说是一个检测你掌握程度的检 ...
转: HTML5新特性之Mutation Observer
转: HTML5新特性之Mutation Observer Mutation Observer是什么 Mutation Observer(变动观察器)是监视DOM变动的接口.当DOM对象树发生任何变动 ...
HTML5新特性之CSS+HTML5实例
1.新的DOCTYPE和字符集 HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. <!DOCTYPE html> 同时字符集声明也被简化了: <meta c ...
HTML5新特性：FileReader 和 FormData
连接在这里: HTML5新特性:FileReader 和 FormData
HTML5新特性：范围样式
原文出处:http://blog.csdn.net/hfahe/article/details/7381141 Chromium 最近实现了一个HTML5的新特性:范围样式,又叫做< ...
html5新特性contenteditable 属性更容易实现动态表单
介绍html5新特性的一个属性:contenteditable 作用域全局.所有的块标签都可以,例如:span.p.div.td等标签.但是,不可以作用域<br/>类型的标签. conte ...
HTML5新特性之文件和二进制数据的操作 Blob对象
HTML5新特性之文件和二进制数据的操作 1.Blob对象 2.FileList对象 3.File对象 4.FileReader 对象 5.URL对象

随机推荐

在Ubuntu16.04.4上安装docker
在Ubuntu16.04.4上安装docker 一.环境准备首先我们需要一台Ubuntu16.04 虚拟机或者真机,其次,我们对其进行环境配置. 1.1.移除已经安装过的dock ...
python数据结构（整理）
http://www.cnblogs.com/yupeng/p/3413763.html 1. 单链表链表的定义: 链表(linked list)是由一组被称为结点的数据元素组成的数据结构,每个结点 ...
TB5上正常使用msfconsole
在TB上使用系统自带的msfconsole,给出以下错误 [-] Failed to connect to the database: could not connect to server: Con ...
SOA架构
基于服务的SOA架构_后续篇今天是元宵节,首先祝各位广大博友在接下来的光阴中技术更上一层,事事如意!(没能在元宵节发布,今天就补上吧) 昨天简单介绍了一下本人在近期开发过的一个电商购物平台的架构 ...
JPA注解实现联合主键
当表中一个主键不能唯一标识一条记录的时候,就需要使用联合主键了,下面是使用JPA注解实现联合主键的代码 1 首先需要建立一个复合主键类,用来存放需要生产联合主键的属性,该类需要实现序列化. packa ...
halcon 数字转字符串实现循环读取图片
1.将字符转换为数字 tuple_number (StringImageIndex,IntImageIndex) 2.将数字转换为字符 tuple_string (IntImageIndex, '0' ...
十六、详述 IntelliJ IDEA 创建 Maven 项目及设置 java 源目录的方法
Maven 是一个优秀的项目管理工具,它为我们提供了一个构建完整的生命周期框架.现在,就让我们一起看看如何利用 IntelliJ IDEA 快速的创建 Maven 项目吧! 如上图所示,点击Creat ...
javaWeb中怎么获取提交表单里面的值
在javaWeb中如何获得html文件中的表单里面的值? <!DOCTYPE html> <html> <head> <meta charset=" ...
Msql数据库连接写一个共有的连接工具
为了避免在每一个DAO中都需要自行连接connection,有多个DAO里都需要获取数据库的连接,并且在很多项目中都是一样的数据库连接. 所以就可以把获取数据库连接的代码重构到一个类里. 这样做的好处 ...
Android平台上PMEM的使用及Platform设备注册(一)
Android中PMEM驱动程序是物理内存的驱动程序,可用于分配物理内存.PMEM在camera和video系统中频繁使用.下面,简单记录一下PMEM的使用方法.另外,由于PMEM设备做为Platfo ...

html5新特性与用法大全了解一下

有好多小伙伴私聊我问我html5新特性 和用法，下面我给大家具体介绍一下html5都新加了哪些新特性，下面我给大家总结一下。

1)新的语义标签 footer header 等等2）增强型表单 表单2.03）音频和视频4）canvas 绘图5） SVG绘图6）地理定位7） 拖放API8）web worker 用来执行耗时任务9）web Storage 在浏览器端存储大量数据10）web Socket 一种持续性的连接（非http协议）

（一）新型的语义标签就不说了，

例如<footer></footer>

（二）增强型表单 表单2.0

一、

二、h5中 新增的表单元素 -- datalist 建议列表

四、h5中 新增的表单元素 -- progress 进度条 有两种形式： bootstrap里面有progress插件样式

五、h5中 新增的表单元素 -- meter

meter:度量衡/刻度尺/，用于标示一个所处的范围：不可接受（红色）/可以接受（黄色）/非常优秀（绿色）

(三） video 视频和音频

属性方法和视频一样，只不过没有海报属性 ***判断复选框是否√选 cb.onchange=function(){ this.checked true为选上，false为没选 }

（四）、canvas

每个画布上有且只有一个“画笔”对象 ———称为“绘图上下文”对象——使用该对象进行绘图！ var ctx = canvas.getContext('2d') //现在只有2d的 得到画布上的画布对象

canvas绘图 ---难点 ！！！ 1）SVG绘图：矢量绘图技术，2000年出现，后纳入H5标准 2）Canvas绘图：位图绘图技术，H5提出的绘图技术 3）WebGL绘图：3D绘图技术，尚未纳入H5标准

2）使用canvas绘制文本 一段文字的定位点在其文本基线的起点

3）使用canvas绘制路径 path:类似于ps中的“钢笔工具”，由多个坐标点组成的任意形状，路径不可见，可用于“描边”、 “填充”，“裁剪”。

角度制：360 = 弧度制：2PI 180 = 1PI 例如

4）使用canvas绘制图像 canvas属于客户端技术，图片在服务器中，所以浏览器必须先下载要绘制的图片， 且等待图片异步加载完成：

监听鼠标在画布上方移动事件

2、canvas绘图中渐变 线性渐变：linearGradient 径向渐变：radialGradient 可以参考ps中渐变效果、

难点：坐标系坐标轴 、单词比较多 3、绘图变形

（五）SVG绘图

先来了解一下什么是位图和矢量图。简单了解一下就可以。

位图：由一个又一个像素点组成，每个点各有自己的颜色，色彩细腻。 矢量图：由一个又一个线条组成，每个线条可以指定颜色，方向，可以无限缩放，但颜色细节不够丰富

一、SVG绘图 使用标签进行绘图，可以直接绑定事件监听

二、如何js创建一个svg标签！

三、svg创建椭圆

四、svg创建直线

注：stroke-linecap="square"有多出来的方形 ，stroke-linecap="round"多出来圆形的区域，stroke-linecap="butt"不出来多方形 （也就是说你创建的直线设置这些属性头尾有区别！自己试一下就知道了！细节很重要！）

五、svg创建折线

六、地理定位 （以后不用客户端，我们也可以自己定位咯！）

2、扩展：在网页中如何嵌入百度地图 1）注册百度开发者账号 map.baidu.com ---> lbsyun.baidu.com 2）创建一个网站；登录百度地图，为网站申请一个地图的AccessKey 3）在自己的网页中嵌入百度地图提供的API，嵌入百度地图

这里不多讲这个如何嵌入了！（要记住用百度地图必须注册账号，然后引用人家的库就对了！）

七、拖放API

前面有讲过拖放：小伙伴们自己往前找一下以前的博客。

八 存储

九 web Socket

这个东西说不说呢。。。。。还是稍微简单的讲一下吧，全靠领悟啊~~

web socket 是一个可以在服务器与客户端之间建立一个非http的双向连接！

这个连接是实时的，也是永久的。

服务器可以主动推送消息。

服务器不在需要轮询客户端的请求，服务器与客户端之间通信无需重新建立连接。

也就是可持续性的 来回通讯。

如何创建呢？一段代码搞定

如有不足之处请大神指正！！欢迎技术交流。

html5新特性与用法大全了解一下的更多相关文章

随机推荐

热门专题

有好多小伙伴私聊我问我html5新特性和用法，下面我给大家具体介绍一下html5都新加了哪些新特性，下面我给大家总结一下。

（二）增强型表单表单2.0

二、h5中新增的表单元素 -- datalist 建议列表

四、h5中新增的表单元素 -- progress 进度条
有两种形式：
bootstrap里面有progress插件样式

五、h5中新增的表单元素 -- meter

属性方法和视频一样，只不过没有海报属性
***判断复选框是否√选
cb.onchange=function(){
this.checked true为选上，false为没选
}

每个画布上有且只有一个“画笔”对象 ———称为“绘图上下文”对象——使用该对象进行绘图！
var ctx = canvas.getContext('2d') //现在只有2d的得到画布上的画布对象

canvas绘图 ---难点！！！
1）SVG绘图：矢量绘图技术，2000年出现，后纳入H5标准
2）Canvas绘图：位图绘图技术，H5提出的绘图技术
3）WebGL绘图：3D绘图技术，尚未纳入H5标准

2）使用canvas绘制文本
一段文字的定位点在其文本基线的起点

3）使用canvas绘制路径
path:类似于ps中的“钢笔工具”，由多个坐标点组成的任意形状，路径不可见，可用于“描边”、
“填充”，“裁剪”。

角度制：360 = 弧度制：2PI
180 = 1PI
例如

4）使用canvas绘制图像
canvas属于客户端技术，图片在服务器中，所以浏览器必须先下载要绘制的图片，
且等待图片异步加载完成：

2、canvas绘图中渐变
线性渐变：linearGradient
径向渐变：radialGradient
可以参考ps中渐变效果、

难点：坐标系坐标轴、单词比较多

3、绘图变形

位图：由一个又一个像素点组成，每个点各有自己的颜色，色彩细腻。
矢量图：由一个又一个线条组成，每个线条可以指定颜色，方向，可以无限缩放，但颜色细节不够丰富

一、SVG绘图使用标签进行绘图，可以直接绑定事件监听

注：stroke-linecap="square"有多出来的方形，stroke-linecap="round"多出来圆形的区域，stroke-linecap="butt"不出来多方形（也就是说你创建的直线设置这些属性头尾有区别！自己试一下就知道了！细节很重要！）

六、地理定位（以后不用客户端，我们也可以自己定位咯！）

2、扩展：在网页中如何嵌入百度地图
1）注册百度开发者账号 map.baidu.com ---> lbsyun.baidu.com
2）创建一个网站；登录百度地图，为网站申请一个地图的AccessKey
3）在自己的网页中嵌入百度地图提供的API，嵌入百度地图

八存储

也就是可持续性的来回通讯。