H5.1

作者: fastwe | 来源:发表于2018-11-28 21:21 被阅读0次

第一章

HTML5 (2014年10月29日发布)新特性: 10个

(1)新的语义标签

(2)增强型表单

(3)视频和音频

(4)Canvas 绘图——— 没有其它技术可以代替

(5)SVG 绘图 ——— 没有其它技术可以代替

(6)地理定位

(7)拖放API

(8)Web Worker

(9)Web Storage ——— 跨页面、跨时间存取数据

(10)Web Socket

_______________________________________________________________________________________________

在<script></script>标签中不需要插入type="text/javascript"

因为在HTML5中已经不需要该属性，JavaScript在所有现代浏览器中是 HTML5 的默认脚本语言

_______________________________________________________________________________________________

增强型表单第一组 ——— 新的<input type="...">

H5之前的input type:

text、password、radio、checkbox、file、hidden、submit、reset、button、image

H5新增的input type: 10个

邮箱 email 验证规则: \w{1,}@\w{1,}

数字 number min: 最小值；max: 最大值；step: 步长

<input type="number" /> 在点击输入框时，右边会出现上下的箭头，可用css取消

<style>

input::-webkit-outer-spin-button,

input::-webkit-inner-spin-button{

-webkit-appearance: none;

-moz-appearance: none;

}

input[type="number"]{

-moz-appearance: textfield;

}

</style>

网址 url 验证规则: [a-zA-Z]{1,}

搜索 search 有些浏览器会显示个×

范围 range 定义滑块控件，min: 最小值；max: 最大值；step: 步长

电话tel(无验证规则，在移动端弹出数字键盘)、颜色color、日期date、月份month、星期week

增强型表单第二组 ——— 新的表单元素

H5之前的表单元素:input、select/option、textarea、button、label

H5新增的表单元素:

① datalist: 数据列表，本身不可见，用于为其他的input提供输入建议列表

</datalist>

<input type="text" list="datalist的id"> 显示在此输入框

② progress: 进度条

<progress></progress> 左右晃动的进度条

<progress value="0.5"></progress> 具有指定进度值的进度条

max: 指定完成时的进度值

③ meter: 刻度尺、度量衡，用于标示一个值所处范围

警告/不可接受(红色)、可以接收(黄色)、最优范围(绿色)

④ output: 输出值，典型的语义标签,表明其中的内容是其它值经过运算后得到的输出,默认样式与span相同

_______________________________________________________________________________________________

增强型表单第三组

H5之前的表单元素的属性:

id、class、style、title、name、value、type、checked、selected、disabled、readonly

H5新增的表单元素的属性:

① autofocus 无值，设置后可以自动获取输入焦点

② placeholder = "..." 在输入框中没有提示输入时的占位性质的提示文字，与value不同，不能用于提交

③ multiple 设置后允许输入多个值(用逗号分隔)，一般需要和特殊的输入组合使用，如email

④form = "form的id" 用于指定当前输入域(一般放在FORM元素之外)所属的表单(输入域放置在form外部时)

与输入验证相关的表单元素的属性:—————只有用submit提交时才会验证，button不行

⑤ required 必填项，不允许为空

修改提示的文字:if(input.validity.valueMissing==true){ input.setCustomValidity("自定义提示") }

⑥ minlength 限定输入的最小长度（在有输入的情况下）

⑦ maxlength 限定输入的最大长度

⑧ min 限定输入数值的最小值

⑨ max 限定输入数值的最大值

⑩ pattern 指定输入必须符合正则表达式

<input pattern="1[3578]\d{9}" /> 可以省略^和$

了解：H5新增与验证相关的JS对象级属性(input是个对象，查看方法:console.dir(input))

input.validity { 输入框的验证有效性

badInput: false 无效的输入，如number输入字母

customError: false 存在自定义错误

patternMismatch: false 不匹配指定的正则表达式

rangeOverflow: false 值上溢出

rangeUnderflow: false 值下溢出

stepMismatch: false 步长不匹配

tooLong: false 内容太长

tooShort: false 内容太短

typeMismatch: false 类型不匹配

valueMissing: true 值缺失(为true时，表示无值)

valid: true 当前输入值有效

}

上述的属性值与H5的表单验证相关属性相对应，若违反了某个验证属性，上述属性之一就会变为true

使用这些属性可以实现不读取value，而对输入进行验证

第二章*****************************************************************************************

Flash技术被H5取代体现在哪些方面?

① Flash绘图(AS/Flex) → Canvas/SVG

② Flash动画(AS/Flex) → Canvas + 定时器

③ Flash 视频和音频播放器 → VIDEO/AUDIO

④ Flash 客户端存储(AS) → Web Storage

H5新特性之三 —————视频播放

或者

<video>

<source src="x.mp4"> //如果支持.MP4则播放，否则

<source src="x.ogg"> //如果支持.ogg则播放，否则显示文字

浏览器不支持video播放

</video>

H5新增的video标签是一个300*150的inline-block元素，若指定了src视频源，会自动用第一帧的宽高撑开行内块元素

video标签及对象所具有的的成员:

video的成员,属性:

autoplay: false 是否自动播放

controls: false 是否显示播放控件

loop: false 是否循环播放

muted: false 是否静音

preload="auto" 指定视频预加载策略(放在服务器上才能看出效果)

auto 预加载视频元数据及缓冲一定时长

metadata 仅预加载视频元数据

none 不预加载任何数据

poster="x.png" 在播放视频第一帧之前显示的海报

JS对象专有的属性,放在script中

.volume=0～1 音量(音量淡入淡出时，用一个变量保存音量的值，再加减)

.duration: 总时长

.currentTime: 当前已播放的时长

.paused: true 当前是否处于暂停状态

.playbackRate=1 调整播放速率，大于1是快放，小于1是慢放

video的成员,方法:

.play() 开始播放

.pause() 暂停播放

video的成员,事件:

.onplay: 当视频开始播放时,触发事件

.onpause: 视频暂停播放事件，不论由于何种原因

纯H5页面在手机端中是无法实现自动播放的，移动端浏览器大部分是禁用video和audio的autoplay功能。这样做主要是为了防止不必要的自动播放浪费流量。很多移动浏览器也不支持首次js调用play方法进行播放(只有用户手动点播放后暂停，然后用代码进行play)

注意: 在微信端需要添加webkit-playsinline="true" playsinline="true" 两个属性以兼容iOS10/iOS9

video{ object-fit: fill; } //去掉播放前的黑边

x5-video-player-type="h5" //显示播放器控件

flash和video标签都不能播放编码格式为MPEG4的mp4文件(只有声音没有画面)，仅支持avc(h264)格式MP4文件，可使用视频转换器转换视频格式

_______________________________________________________________________________________________

H5新特性之三 —————音频播放

或者

<audio>

<source src="x.mp3"> //如果支持.MP3则播放，否则

<source src="x.ogg"> //如果支持.ogg则播放，否则

<source src="x.wav"> //如果支持.wav则播放，否则显示文字

浏览器不支持AUDIO标签

</audio>

H5新增的AUDIO元素用于播放音频，默认是一个300*30的inline-block，若不指定controls属性，默认是隐藏元素

AUDIO标签及对象所具有的的成员:

audio的成员,属性:

autoplay: false 是否自动播放

controls: false 是否显示播放控件

loop: false 是否循环播放

muted: false 是否静音

preload="auto" 指定音频预加载策略

auto 预加载音频元数据及缓冲一定时长

metadata 仅预加载音频元数据

none 不预加载任何数据

JS对象专有的属性,放在script中

.volume=0～1 音量

.duration: 总时长

.currentTime: 当前已播放的时长

.paused: true 当前是否处于暂停状态

.playbackRate=1 回放速率，大于1是快放，小于1是慢放

audio的成员,方法:

.play() 开始播放

.pause() 暂停播放

audio的成员,事件:

.onplay: 当音频开始播放时,触发事件

.onpause: 音频暂停播放事件，不论由于何种原因

_______________________________________________________________________________________________

H5新特性之四 —————Canvas绘图技术

<canvas id="c3" width="500" height="400"> //canvas: 画布，是h5提供的2D绘图技术

浏览器不支持CANVAS标签 //版本不支持canvas时显示

</canvas>

CANVAS元素用于在网页中实现任意的绘图操作；该元素默认是一个300*150的inline-block

Canvas画布的尺寸若用CSS来指定，并未修改真正的尺寸，而是进行"拉伸"，所以Canvas尺寸不能用CSS指定

只能用HTML元素的属性或JS对象属性来指定宽和高(SVG可以使用CSS指定)

每个CANVAS元素(画布)上有且只有一根"画笔"对象 ——— 即绘图上下文对象

使用画笔绘制矩形——— 矩形的定位点在自己左上角

var canvas = document.getElementById('c3');

var ctx = canvas.getContext('2d'); //获取画布上的画笔对象，不支持3d

console.dir(ctx) //查看画笔的相关属性和方法

ctx.lineWidth = 1 描边/线条的宽度(单位px),默认为1

ctx.fillStyle= '#000'/g 填充样式/颜色，设置或返回用于填充绘画的颜色、渐变或模式

ctx.strokeStyle= '#000'/g 描边样式，设置或返回用于笔触的颜色、渐变或模式，或: "rgb(r,g,b)"

ctx.fillRect(x,y,w,h) 填充画笔对象(实心) fill:填充

ctx.strokeRect(x,y,w,h) 描边画笔对象(只有边) stroke:描边

ctx.clearRect(x,y,w,h) 清除一个矩形的画笔对象内所有绘图内容

第三章*****************************************************************************************

varxDirection= null; 可以设置变量(在定时器外声明)表示移动(与坐标相乘),正向右,负向左

x+=10*xDirection; 设置一个定时器，使其移动

canvas绘图中使用渐变对象

线性渐变: linearGradient

径向渐变: redialGradient

var g = ctx.createLinearGradient(x1起点,y1, x2终点,y2); 创建线性渐变对象

g.addColorStop(偏移量[0～1],color1) 设置渐变对象中的颜色点(至少2个)

g.addColorStop(偏移量[0～1],color2) 设置渐变对象中的颜色点

ctx.fillStyle = g; //设置填充的渐变样式

ctx.fillRect(0,0,100,100); //填充渐变

使用canvas绘制文本

ctx.font= '10px sans-serif' 设置文本大小、字体

ctx.textBaseline= 'top' 设置文本基线(共有四根)，文字的定位点在文本基线的起点

ctx.fillText('文本字符串',x,y) 填充一段文本

ctx.strokeText('文本字符串',x,y) 描边一段文本

ctx.measureText('文本字符串').width 基于当前文字大小、字体测量指定文本的宽度

使用Canvas的画笔绘制路径

Path: 路径,类似于Photoshop中的'钢笔工具'，由多个坐标点组成任意形状，路径本身不可见

可用于: ①描边 ②填充 ③选区裁剪

ctx.beginPath() 开始一条新的路径，或重置当前路径，一条路径可画多个不连接的线

同一条路径后面的样式会覆盖前面的样式

ctx.closePath() 闭合当前路径

ctx.moveTo(x,y) 把路径移动到画布中的指定点，不创建线条(不必开始路径)

ctx.lineTo(x,y) 把路径移动到画布中的指定点，创建线条(不必开始路径，用ctx.stroke())

ctx.arc(圆心X轴,圆心Y轴,r半径,start弧度,end弧度,false) 绘制圆形/圆弧路径(不必开始路径,但要填充)

默认false顺时针，改为true变为逆时针

弧度:0～2*PI，角度:0～360；弧度=角度*Math.PI(即π)/180，一周(360°)的弧度数为2π

圆的标准方程: (x-a)²+(y-b)² = r²

ctx.ellipse( cx,cy,rx,ry,start,end ) 绘制椭圆路径

ctx.stroke() 对当前路径描边

ctx.fill() 对当前路径填充

ctx.clip() 对当前路径裁剪，从原始画布剪切任意形状和尺寸的区域

ctx.lineJoin="round"; 当两条线条交汇时，创建圆形边角

使用Canvas的画笔绘制图像(img元素，而不是背景图)

canvas属于客户端技术，图片在服务器中，所以浏览器必须等待图片加载完成才能绘制图像

var img = new Image() 创建图片对象

img.src = 'x.png'; 对图片对象属性src赋值，浏览器会自动去异步下载此图片

img.onload=function(){ 绘制图像 } 等图片加载完成后再绘制图像

ctx.drawImage(img,x,y) 原尺寸绘图

ctx.drawImage(img,x,y,w,h) 缩放原尺寸绘图

ctx.toDataURL('image/png') 可将img图片的url进行base64编码(默认为png类型)

canvas变形: 可以针对某一个图像、图形的绘制过程进行变形

Canvas绘图只有一个元素:<canvas></canvas>，若仅仅让其中的某个图形/图像变形,不能使用CSS属性变形

canvas内画的图形，不是元素，无法触发事件

绘图上下文提供了专用的变形方法:

ctx.translate(x,y) 将整个画布的原点(0,0)平移到指定点，重新映射画布上的(0,0)位置

注意: 画布原点平移，其上所有点的坐标值都发生改变，清除画布时也要注意原点

ctx.rotate(旋转的弧度) 旋转绘图对象，轴点是画布的原点(0,0)，先平移圆心再旋转

① 画笔的旋转轴为画布的坐标原点

② 画笔的旋转具有累加效果

③ 若想让绘图内容绕其它点旋转，必须先平移画布的坐标原点

④ 想让图像旋转出不同的效果:(在定时器内，先清空画布)

定时器内(2中方式):

① 清除画布→平移→旋转→绘图→逆向抵消旋转→逆向抵消平移→角度手动累加(抵消后无法自动累加角度)

→常规绘制图像

②清除画布→保存状态→平移→旋转→绘图→读取状态→角度手动累加(抵消后无法自动累加角度)

→常规绘制图像

ctx.scale() 缩放当前绘图至更大或更小

ctx.save() 保存画笔当前的所有变形状态(游戏中存盘)

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

不要读盘后操作再读盘，每次操作前都要先存盘

canvas如何按照特定的顺序绘制图片

cavnas绘图中若需要多张图片，他们的加载都是异步的，无法预测哪一张先加载完成

但是绘图往往按照一定的顺序，如先绘背景，再绘上面的内容，所以必须等待所有图片全部加载完成，才能开始绘图

var progress = 0; //全局变量: 所有图片的总加载进度，当progress为一定值时，才进行相关操作

var imgBg = new Image();

imgBg.src = "img/bg.jpg";

imgBg.onload = function(){

progress += 25; //在总进度中加入自己的权重

if(progress===100){ startDraw(); } //如果需要的总权重已满，开始绘图

} //在绘图函数中调整绘图层次

如何为canvas上图形/图像绑定事件监听?

思路: 为canvas元素绑定监听，计算事件发生点到圆形按钮的中心点距离是否小于半径

canvas.onclick = function(e){

var ex = e.offsetX; //获取事件发生坐标 x y

var ey = e.offsetY;

var rx = w/2; //计算圆形按钮坐标与半径

var ry = h-40;

var r = 40;

if(Math.sqrt((ex-rx)*(ex-rx)+(ey-ry)*(ey-ry))<=r){ //用圆的标准方程计算两个点间距，

console.log("圆形按钮被点击"); //若小于等于圆形半径，触发相应程序

} }

_______________________________________________________________________________________________

总结: Canvas绘图技术是H5新增的一种JS 2D 位图绘图技术，在项目中可用于统计图、小游戏、页面特效

扩展: 基于Canvas的第三方的绘制统计图工具

① Chart.js 开源免费的图表函数库，提供了8种统计图表

② FusionCharts 收费的图表工具库，提供了90+种统计图表

③ ECharts 百度提供的免费的绘图工具，与地图整合很好

④ FreeCharts 开源免费的图表函数库

第三方工具库自学步骤:

① 找到官网，查看说明: http://www.chartjs.org，开源免费的8中图表，基于H5 canvas

② 仿写官方的Demo程序

var ctx = c1.getContext('2d');

new Chart(ctx,{

type:"bar", //图表类型，共8种可用

data:{}, //绘图所用的数据

optioni:{} //图表选项，如禁用响应式、Y轴从0开始等

});

</script>

③ 查看官方的API Document，在项目中加以应用

_______________________________________________________________________________________________

颜色、样式和阴影

属性描述

fillStyle 设置或返回用于填充绘画的颜色、渐变或模式

strokeStyle="#000" 设置或返回用于笔触的颜色、渐变或模式

shadowColor 设置或返回用于阴影的颜色

shadowBlur 设置或返回用于阴影的模糊级别

shadowOffsetX 设置或返回阴影距形状的水平距离

shadowOffsetY 设置或返回阴影距形状的垂直距离

方法描述

createLinearGradient() 创建线性渐变（用在画布内容上）

createPattern() 在指定的方向上重复指定的元素

createRadialGradient() 创建放射状/环形的渐变（用在画布内容上）

addColorStop() 规定渐变对象中的颜色和停止位置

线条样式

属性描述

lineCap 设置或返回线条的结束端点样式

lineJoin 设置或返回两条线相交时，所创建的拐角类型

lineWidth 设置或返回当前的线条宽度

miterLimit 设置或返回最大斜接长度

矩形

方法描述

rect() 创建矩形

fillRect() 绘制“被填充”的矩形

strokeRect() 绘制矩形（无填充）

clearRect() 在给定的矩形内清除指定的像素

路径

方法描述

fill() 填充当前绘图（路径）

stroke() 绘制已定义的路径

beginPath() 起始一条路径，或重置当前路径

moveTo() 把路径移动到画布中的指定点，不创建线条

closePath() 创建从当前点回到起始点的路径

lineTo() 添加一个新点，然后在画布中创建从该点到最后指定点的线条

clip() 从原始画布剪切任意形状和尺寸的区域

quadraticCurveTo() 创建二次贝塞尔曲线

bezierCurveTo() 创建三次方贝塞尔曲线

arc() 创建弧/曲线（用于创建圆形或部分圆）

arcTo() 创建两切线之间的弧/曲线

isPointInPath() 如果指定的点位于当前路径中，则返回 true，否则返回 false

转换

方法描述

scale() 缩放当前绘图至更大或更小

rotate() 旋转当前绘图

translate() 重新映射画布上的 (0,0) 位置

transform() 替换绘图的当前转换矩阵

setTransform() 将当前转换重置为单位矩阵。然后运行 transform()

文本

属性描述

font 设置或返回文本内容的当前字体属性

textAlign 设置或返回文本内容的当前对齐方式

textBaseline 设置或返回在绘制文本时使用的当前文本基线

方法描述

fillText() 在画布上绘制"被填充的"文本

strokeText() 在画布上绘制文本（无填充）

measureText() 返回包含指定文本宽度的对象

图像绘制

方法描述

drawImage() 向画布上绘制图像、画布或视频

像素操作

属性描述

width 返回 ImageData 对象的宽度

height 返回 ImageData 对象的高度

data 返回一个对象，其包含指定的 ImageData 对象的图像数据

方法描述

createImageData() 创建新的、空白的 ImageData 对象

getImageData() 返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据

putImageData() 把图像数据（从指定的 ImageData 对象）放回画布上

合成

属性描述

globalAlpha 设置或返回绘图的当前 alpha 或透明值

globalCompositeOperation 设置或返回新图像如何绘制到已有的图像上

其他

方法描述

save() 保存当前环境的状态

restore() 返回之前保存过的路径状态和属性

第四章*****************************************************************************************

位图: bit图，每个图片都有若干个点组成，每个点由rgb描述，善于描述颜色的细腻变化，但放大会失真；适合于存储照片

矢量图: 每个图片由若干路径组成，每个路径由方向、大小、填充/描边色描述，可以无限放大而不会失真，但颜色变化不够细腻；适合于设计图形、Flash动画

H5新特性之五 ————— SVG绘图: Scalable Vector Graph，可缩放的矢量图

canvas绘图SVG绘图

类型2D位图2D矢量图

如何绘图使用JS代码绘图使用元素/标签绘图

事件绑定每个图形不是元素，无法直接绑定事件，只能给整个画布绑定每个图形都是元素，可以直接绑定事件监听

应用场合统计图/网页游戏统计图/图标/地图应用

SVG技术最早在2000年就有了，作为一种XML的扩展应用存在，后来H5标准把SVG标签纳入到H5内，进行了一部分精简

H5标准之前使用SVG的方法:

编写一个XML文档，如my.svg，写一个SVG标签，在其中写上各种图形元素(如<rect></rect>)

再编写一个HTML文档，在其中用img引用svg，进行绘图: <img src="my.svg">

H5标准之后使用SVG的方法:

H5标签把SVG标签采纳进来，可以直接在H5文档中书写

SVG图像/图形标签的共性:

①默认都没有尺寸，尺寸相关属性是必需

② 初始化都只有填充色(#000)，没有描边色

③ SVG标签的样式可以用HTML标签属性形式声明，也可以类似于CSS形式声明

但用CSS声明时，只能使用SVG专用样式，不能使用CSS样式，如:边框只能用stroke，而不用border

④ 要用核心DOM来访问SVG元素的属性(.setAttribute/.getAttribute)，不能使用HTML DOM 操作

用jQuery的css 或者 class来修改属性

⑤ 动态创建SVG图形标签可以使用拼接HTML字符串，再svg.innerHTML=拼接字符的方式

或者:var elem = document.createElementNS('http://www.w3.org/2000/svg','标签名')

_______________________________________________________________________________________________

x，y: 图形坐标(左上角)

fill: 填充色

stroke: 描边色

fill-opacity: 填充透明度

stroke-opacity: 描边透明度(0～1)

stroke-width: 描边线条宽度

① 绘制矩形:<rect></rect>

width: 宽度

height: 高度

rx/ry: 使矩形产生圆角

② 绘制圆形:<circle></circle>

r: 半径

cx，cy: 圆心的坐标x/y，默认为(0,0)

③绘制椭圆:<ellipse></ellipse>

cx，cy: 圆点的坐标x/y

rx: 定义水平半径

ry: 定义垂直半径

④绘制直线:<line></line>

x1，y1: 起始坐标

x2，y2: 结束坐标

stroke: 线条颜色，默认透明

stroke-width: 定义线宽

stroke-linecap: butt/round(圆角)/square: 修饰直线的开头和结尾

strokedasharray: 用于创建虚线

⑤绘制折线:<polyline points="200,100 300,200..."></polyline>

绘制多边形:<polygon points="200,100 300,200..."></polygon>

points: 定义折线/多边形每个角的x和y坐标

⑥ 绘制文本:<text>文本内容</text>

SVG画布上不能使用普通的HTML标签，如span

alignment-baseline="before-edge"

font-family="SimHei"

⑦ 绘制图像:<image></iamge>

不能使用IMG设置于SVG画布，只能使用image

xlink:href="url" 图片路径

⑨<path>标签用来定义路径，这些命令可用于路径数据:

M: moveto 移至

L: lineto 画线

H: horizontal lineto 画横线

V: vertical lineto 垂直画线

C: curveto 画曲线

S: smooth curveto 画光滑曲线

Q: quadratic Belzier curve 画belzier曲线

T: smooth quadratic Belzier curveto 画光滑的belzier曲线

A: elliptical Arc 画椭圆/弧

Z: closepath 闭合路径

注: 以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位

比如: d="M169,174c46-5,186.5-86.5,133-140S169,174,169,174z"

M100,100 → 以（100，100）坐标点为起点

L200,200 → 从（100，100）向（200，200）画一条直线

d="M250 150 L150 350 L350 350 Z" //命令之间用空格隔开，坐标之间用逗号

可以使用<g></g>标签创建一个"标签组Group"，放在<svg></svg>标签中，把svg子标签放在其中

它本身不可见，但可以盛放其它子标签，子标签会自动继承所在小组的默认属性值，尽量不用

_______________________________________________________________________________________________

在SVG中实现渐变，首先在<defs>元素中声明所需要的渐变对象:

<defs>

</linearGradient>

</defs>

然后创建可见图形对象，声明fill或stroke使用渐变对象:

使用SVG滤镜特效对象

filter: 滤镜，各种滤镜效果可以参考Photopshop中的滤镜，如高斯模糊

SVG支持的滤镜有哪些: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter

① 首先在<defs>元素中声明所需要的滤镜对象:

<svg>

<defs>

<filterid="f2">

<feGaussianBlurstdDeviation="3">

</filter>

</defs>

② 然后创建可见图形对象，声明filter使用滤镜对象:

</svg>

<filter> 标签的 id 属性可为滤镜定义一个唯一的名称（同一滤镜可被文档中的多个元素使用）

filter:url 属性用来把元素链接到滤镜。当链接滤镜 id 时，必须使用 # 字符

<feGaussianBlur>标签的stdDeviation属性定义模糊的程度

第五章*****************************************************************************************

Web网页项目中可用的绘图技术

①Canvas技术 H5新增的原生技术，是一种2D JS 位图绘图技术

②SVG技术 H5采纳的已有技术，是一种2D 标签矢量图绘图技术，2000年出现

③WebGL 尚未采纳为H5标准，是一种2D/3D JS绘图技术，具体可参考three.js

第三方的2D绘图工具库 ——— Two.js

Two.js是一个2D绘图中间件，使用一套API，可以实现在不同的上下文环境中绘图，如svg/canvas/webgl等

① 找到官网，查看介绍: https://two.js.org/

② 仿写Demo

创建对象: var two = new Two({}).appendTo(body1)

绘制一个圆形: var c = two.makeCircle(200,200,100);

绘制一个矩形: var r = two.makeRectangle(200,200,50,50);

将绘制对象添加DOM树: two.update();

③ 查看API Document，应用在自己的项目中

Two.js中的旋转都以自己为中心，且不会累加

two.js的小组(Group)本身不可见不透明，可用于盛放多个其他图形，默认原点在(0,0)，小组中元素定位点都相对于原点

Two.js动画原理: 调用two.play(),该方法底层每秒调用60次two.update(),每次调用触发一次update事件

_______________________________________________________________________________________________

H5新特性之六 ——— 地理定位

Geolocation地理定位，通过JS获取浏览器当前用户所在的地理坐标信息(经度、纬度、海拔、速度)数据，用于创建LBS(Location Based Service)应用，如送餐、打车、导航等

如何获取浏览器所在的定位数据:

①手机

首选手机中内置的GPS芯片获取卫星通信数据，定位精度为m

次选手机通信基站，反向推出用户位置，定位精度在km

②PC 浏览器

可以通过用户的IP地址反向解析推导出所在位置(必需有很大的IP地址库，越大精度越高)，精度在km

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

window.navigator.geolocation{

getCurrentPosition: fn 获取当前的定位信息

watchPosition: fn 监视定位数据改变

clearWatch: fn 清除定位监视

}

获取用户定位信息:

window.navigator.geolocation.getCurrentPosition(

function(pos){ //定位成功的回调函数，第一个参数

pos.timestamp: 定位的时间

pos.coords.latitude: 定位的纬度

pos.coords.longitude: 定位的经度

pos.coords.altitude: 定位的海拔

pos.coords.speed: 定位的速度

},

function(err){ //定位失败的回调，第二个参数

err.code

err.message

});

提示: PC中的Chrome和FF都需要到www.googleapis.com进行IP地址反向解析，由于国内无法访问该网站，所以目前在PC中此方法实用价值不大

第三方地图应用 ——— 在自己的网页中使用百度地图

①注册百度开发者账号

官网: http://lbsyun.baidu.com/

JS开发手册: http://lbsyun.baidu.com/index.php?title=jspopular

②创建一个网站，在百度地图中为该网站申请一个AccessKey 秘钥

网址: http://lbsyun.baidu.com/apiconsole/key

创建应用→设置应用类型→设置IP白名单，APP ID，SHA1，安全码，Referer白名单→提交

③仿照Demo，在自己的网站页面中嵌入百度地图

查看自己的经纬度(百度地图坐标拾取器): http://api.map.baidu.com/lbsapi/getpoint/index.html

引入js，例: <script src="http://api.map.baidu.com/api?v=2.0&ak=qmKmAqzQVpdd3ksOQ3yH1tsYWYM0rQa4"></script>

百度地图生成器: http://api.map.baidu.com/lbsapi/createmap/index.html

网友评论

本文标题：H5.1

本文链接：https://www.haomeiwen.com/subject/xifcqqtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

H5.1

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读