首页  思维导图  详情

Html5

2016-11-09 14:43:29   12  举报





AI智能生成

为你推荐

查看更多



HTML5

Html5

HTML5

HTML5移动开发

HTML5

Html5

第十六章 HTML5脚本编程

html5

HTML5 CSS3

作者其他创作

大纲/内容

4.Canvas(画布)

基本内容

新元素<canvas>

Canvas在html页面中提供画布功能

类似于windows画图

绘制的内容与HTML无关

不能通过DOM获取绘制的图形

绘制的图形是不能绑定DOM事件

只能用Canvas的API

用途

在HTML页面中绘制图表( 例如柱状图，饼状图等 )

网页游戏

手机端页面游戏几乎全是

PC端也大量使用

如何使用

默认300*150

1.获取画布元素

var canvas = document.getElementById(\"canvas\");

2.创建画布对象

getContext（）

返回值：画布对象

参数：必须是字符串，必须是\"2d\"或\"3d\" 固定写法

必须是小写字幕

通过画布对象调用canvas提供的API进行图形绘制

绘制图形

实心矩形

空心矩形

清除指定区域矩形

设置颜色

填充颜色

context.fillStyle = \"green\";

描边颜色

context.strokeStyle = \"blue\";

透明度

context.globalAlpha = 0.3;

绘图案例1

/*\t * 需求 - 在HTML页面中绘制空心矩形\t * * 坐标值随机\t * * x和y的要求 - 不能大于页面宽度和高度\t * * 宽度和高度随机\t * * 宽度和高度小于画布的高度和宽度\t * * 颜色随机span class=\"Apple-tab-span\" style=\"white-space:pre\

渐变

线型渐变

具有基准线

起点

终点

createLinearGradient()返回渐变对象，通过渐变对象设置渐变颜色。

position:设置渐变颜色的位置，范围 0-1

color:设置渐变的颜色

示例

/**线型渐变// 1.设置线型渐变 createLinearGradient// createLinearGradient()返回渐变对象，通过渐变对象设置渐变颜色。span style=\"color:#0088ff;font-style:italic;\

扇形渐变（射线）

具有柱形（锥形）

两个圆面积

圆心坐标和半径

扇形渐变只在上下两个圆形区域有颜色渐变效果

效果为颜色从第一个圆渐变到第二个圆

绘制文字

方法

实心文字

text 要绘制的文字

空心文字

属性

font

类似于CSS中的font属性

textAlign

设置水平方向对齐

是指相对于基准线的对齐方式

textBaseline

设置文字垂直方向对齐

hanging 悬挂基线

alphabetic 字母基线

阴影

shadowColor

设置阴影颜色

shadowOffsetX

设置水平方向阴影

取值正负数，表示阴影的偏移值

shadowOffsetY

设置垂直方向阴影

shadowBlur

为阴影设置模糊效果

阴影既可以在文字上，也可以绘制在图形上

路径

（标识）方法

beginPath()

表示开始创建路径

closePath()

表示结束创建路径

绘制方法

stroke()

绘制轮廓

fill()

绘制填充

设置方法

生成一个矩形

设置圆形形状

x和y 圆心

radius 半径

direction 按顺时针或逆时针绘制

true

表示逆时针

false

默认，顺时针

startAngle 和 endAngle 设置圆形的起始位置

设置线条

lineWidth

设置线条的宽度

默认值为1(px)

lineCap

设置线条端点的形状

butt

默认，平直

round

向线条的每个末端添加圆形线帽。

square

向线条的每个末端添加正方形线帽。

lineJoin

设置两条线交点的形状

miter

尖角

和miterLimit搭配使用，限制延伸

圆角

bevel

创建斜角。

案例：绘制饼状图，柱状图

练习：八卦图

课后作业：随机圆

绘制线条(直线和折线) 多边形

设置起点，终点坐标值

设置终点（折点）坐标

设置线条粗细，默认1(px)

设置线条端点形状

默认，向线条的每个末端添加平直的边缘

圆形

指定两条线之间的连接点形状

斜角

默认，创建尖角

和miterLimit搭配使用，确定线条交接点的延伸范围

图片

绘制图片

按照图片原大小加载

img 当前加载（绘制）的图片

width 和 height 设置绘制图片的高和宽

平铺图片

设置对象

img 平铺的图片

type 平铺的方式

repeat 平铺

no-repeat 不平铺

repeat-x 水平平铺

repeat-y 垂直平铺

绘制

fillStyle = 设置对象

fillRect

* 注意：绘制或者平铺都必须保证图片加载完成再绘制。( onload )

绘制加载的图片 //问题：图片并没有出现。 //原因：1.必须先加载 <canvas>，再加载图片. //2.必须先加载完图片，再执行绘制图片。(通过图片的onload事件来确保先加载完图片)

切割图片

clip()

切割(先绘制路线，然后切割)

画布方法

转换方法

缩放（缩小或放大）

x:表示水平方向缩放

1：表示不缩放

<1：表示缩小

>1：表示放大

y:表示垂直方向缩放

相对于上次坐标系

rotate()

旋转当前画布

公式： degree * Math.PI /180

状态

save()

restore()

案例

跟随鼠标的圆圈

随机落下的小球

chart.js

介绍

Canvas的Js库

作用：提供各种图表

特点：基于HTML5 canvas技术

不依赖于任何外部工具库，轻量级

提供六种图表

柱状图

饼状图

曲线图

环型图

极地区域图

雷达图

http://www.bootcss.com/p/chart.js/docs/

8.Flex 弹性布局

关于布局

固定布局( fixed )

定义

设置固定宽度的外包裹，里面的各个模块也是固定宽度而非百分比。重要的是容器（外包裹）元素是设置为不能移动的。无论访问者屏幕的分辨率是多少，网页都显示为和其它访问者相同的宽度。

优点

固定宽度布局更容易使用，在设计方面更容易定制。

在所有浏览器中宽度一样，所以不会受到图片、表单、视频和其他固定宽度内容的麻烦。

不需要min-width和max-width，所有浏览器都支持。

即使需要兼容800×600这么小的分辨率，网页的主体内容仍然有足够的宽度易于阅读。

缺点

对于使用高分辨率的用户，固定宽度布局会留下很大的空白。因此出现了“黄金比例”，“三分定律”，综合平衡和其他设计原则。

屏幕分辨率过小时需要垂直滚动条。

无缝纹理，连续的图案需要适应更大的分辨率。

固定宽度布局一般在可用性上得分较低。

流动布局( fluid/liquid )

流体布局，也被成为流体布局，主体部分都是用了百分比宽度，因此可以自适应用户的分辨率。

流动布局页面对用户更友好，因为它能自适应用户的设置。

页面周围的空白区域在所有分辨率和浏览器下都是相同的，在视觉上更美观。

如果设计良好，流动布局可以避免在小分辨率下出现水平滚动条。

设计者更难控制用户所见，并可能忽略掉一些错误，因为在特定的分辨率下看起来好的。

图片，视频以及其他设置了宽度的内容可能需要多种宽度以适应不同分辨率的用户。

在特别大的分辨率下，内容会被拉成长长的一行，变得难以阅读。

弹性布局

1.什么是Flex布局

Flex是Flexible Box的缩写，意为\"弹性布局\"，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。

.box{ display: flex;}

行内元素也可以使用flex布局

.box{ display: inline-flex;}

Webkit内核的浏览器，必须加上-webkit前缀

.box{ display: -webkit-flex; /* Safari */ display: flex;}

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

2.基本概念

Flex容器(flex container)

采用Flex布局的元素，称为Flex容器（flex container），简称\"容器\"。

Flex项目(flex item)

flex容器的所有子元素自动成为容器成员，称为Flex项目（flex item），简称\"项目\"。

轴

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）

主轴（main axis）

main start

轴的开始位置（与边框的交叉点）叫做main start

main end

结束位置叫做main end

交叉轴（cross axis）

cross start

交叉轴的开始位置叫做cross start

cross end

结束位置叫做cross end

项目默认沿主轴排列

单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size

3.容器的属性

flex-direction

flex-direction属性决定主轴的方向（即项目的排列方向）。

.box { flex-direction: row | row-reverse | column | column-reverse;}

row（默认值）：主轴为水平方向，起点在左端。row-reverse：主轴为水平方向，起点在右端。column：主轴为垂直方向，起点在上沿。column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap

默认情况下，项目都排在一条线（又称\"轴线\"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

.box{ flex-wrap: nowrap | wrap | wrap-reverse;}

（1）nowrap（默认）：不换行。（2）wrap：换行，第一行在上方。（3）wrap-reverse：换行，第一行在下方。

flex-flow

justify-content

align-items

align-content

子主题

HTML5

1.版本

html4

HTML 4.0——1997年12月18日，W3C推荐标准HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准

html5

2014年10月

标签相对简单，重点 javascript

移动端支持优于PC端

版本声明

<!DOCTYPE html>

弱化了版本声明

扩展

Web前端

移动智能终端

iPhone

Android

Windows Mobile

BlackBerry

WebOS

移动跨平台

phoneGap

2.新表单

input新类型

作用：提交表单时，进行基本验证

缺陷：验证逻辑不完整 abc@aa

关键字：search

作用：pc端不明显，加入删除×

URL

作用：验证是否包含http://

缺陷：验证逻辑不完整

关键字：url

tel

注意：效果只能在手机端出现

number

作用：限制输入数字

属性：min max step

min:最小值

max:最大值

step:步长

范围类型

功能：允许用户选择一个范围的数值

value:当前值

颜色类型

功能：预定义的颜色取色控件

案例1：页面配色器

日期类型

date

week

month

表单新元素

定义备选项（并不显示），需要配合<input>元素使用，定义list属性，属性值等于datalist元素的id属性值

特点：数据与结构的分离

<datalist>数据

<input> 结构

优点：使用<datalist>元素定义的数据可以重复使用。

进度条：不同浏览器中效果不一致。

属性：max 设置进度条的最大值，没有min属性，最小值为0

属性：value 表示当前进度值

进度条自动增加

<meter>

low:低值预警

high:高值预警

通常用于显示表单元素处理的结果值

提高代码可读性

pre style=\

表单新属性

placeholder

通常用于search输入类型，也可以用在文本域。

给出简单提示，用于帮助用户输入正确内容。

multiple

可以用在一些输入类型中（email，file等），从而支持在一个域中输入多个值，但所插入的值必须用逗号分隔。

autofocus

自动获取焦点

form

允许将表单元素定义在<form>元素外

表单新验证

验证属性

Required

验证当前元素值是否为空

Pattern

使用正则表达式验证当前元素值是否匹配

不验证是否为空

pattern=\

验证当前元素值最小值或最大值

验证当前元素值的最小，最大长度

maxlength 直接限制输入值的长度

minlength 输入之后再进行验证

validity

利用ValidityState对象描述指定元素的有效状态。

验证状态

注意：所有验证状态必须和验证属性一起使用

valid

执行完毕得到布尔值，它表示表单控件是否已经通过了所有验证的约束条件

true:所言约束条件都通过

false:至少一条验证没有通过

valueMissing

值为空

使用方法：

需要在表单提交前进行验证

onsubmit中处理无效

typeMismatch

patternMismatch

判断当前元素值是否与指定正则表达式匹配

tooLong

判断当前元素值的长度是否正确

配合maxlength属性

rangeUnderflow

如果输入内容小于min属性声明的值，则返回true

stepMismatch

给定的值与min，max，step不一致，则返回true

值只与step相关，-10，110都返回false，其它步长不为10的都返回true

customError

配合setCustomValidity()使用

setCustomValidity()：设置自定义错误提示内容。注意：输入正确后，需要调用改方法设置为空。

一旦调用了setCustomValidity()，则所有验证状态都被置为false

7.本地存储

引入

存储空间限制

字符类型限制，不支持中文

存储形式 key : value

浏览器有存储数目限制

关于自动登录，密码存储安全问题

1.服务器端md5加密

2.服务器端返回加密之后信息到客户端cookie

3.用户再次登陆，服务器根据ip地址等一系列验证之后，再检查cookie传入的信息是否正确，从而实现自动登录

特点

sessionStorage

浏览器窗口关闭时，数据丢失

localStorage

当浏览器窗口关闭时，数据可继续使用

案例:

登录之后进入管理页面

用键值对方式存储

key

作为存储数据的标识

唯一，不可重复

value

存储的数据内容

数据类型

string

getItem(key)

根据key获得对应数据

返回值

key(index)

根据索引值来获取对应的key值

removeItem(key)

clear()

将存储系统的所有数据删除（清空）

length

返回当前存储系统中的数据个数

Demo: sessionStorage实现记事本功能

storage事件

目前仅safari支持该事件

6.移动特性

GeoLocation

地理定位

地球的经度和纬度的相交点

实现地理定位的方式

GPS

美国的，依靠卫星定位

北斗定位

国产，惯性定位技术和卫星定位

基站定位

移动运营商创建基站（提供信号源）

基于互联网

IP地址( PC端和移动端 )

HTML5中地理定位

地理定位功能并不是属于HTML5专有内容

HTML5的地理定位技术，由Google公司提供

Google Map产品

中国国内不能使用Google公司的服务和产品

百度地图

高德地图

http://lbsyun.baidu.com/

web开发

javascript API

功能展现

注册百度开发者账号

http://developer.baidu.com/

百度开发者中心

目标

学习百度地图的基本功能

百度地图的特点

模板实例

http://developer.baidu.com/map/jsdemo.htm#a1_2

帮助文档

http://lbsyun.baidu.com/index.php?title=jspopular

百度地图开发

1.引入百度JS库

2.建立容器

3.创建对象

var map = new BMap.Map(\"allMap\");

4.初始化

map.centerAndZoom(\"南京\");

zoom

pc端 3- 19

移动端 3-18

实例

控件

覆盖

信息框

定位

坐标转换

http://lbsyun.baidu.com/index.php?title=webapi/guide/changeposition

自动补全框

var ac = new BMap.Autocomplete({ \"input\":\"txtSearch\

搜索框自动补全

window.navigator

geolocation

检验该对象可以判断是否支持定位功能

该函数获取定位信息，成功则回调 handleSuccess，失败则回调 handleError

options为配置对象

enableHighAcuracy: true

// 指示浏览器获取高精度的位置，默认为false

//是否使用高精度设备，如GPS。默认是true

// 指定获取地理位置的超时时间，默认不限时，单位为毫秒

maximumAge: 3000

// 最长有效期，在重复获取地理位置时，此参数指定多久再次获取位置。

handleSuccess(position)

获取成功回调函数

position

coords.latitude\t十进制数的纬度coords.longitude\t十进制数的经度coords.accuracy\t位置精度coords.altitude\t海拔，海平面以上以米计coords.altitudeAccuracy\t位置的海拔精度coords.heading\t方向，从正北开始以度计coords.speed\t速度，以米/每秒计timestamp\t响应的日期/时间

拖拽

基础

实现拖拽效果需要确定两个内容

拖拽的是什么( 源元素 )

拖拽到哪里去( 目标元素 )

实现

使用原生DOM实现

最麻烦

使用jQuery的插件

HTML5 中提供的拖拽功能

使用

源元素

源元素事件

dragstart

当鼠标开始拖放时被触发

drag

当鼠标拖动过程中触发

类似于鼠标的 onmousemove 事件

dragend

当鼠标结束拖放时被触发

目标元素

目标元素事件

dragover

当鼠标拖放位于目标元素上时被触发

dragenter

当鼠标拖放第一次进入目标元素时触发

dragleave

当鼠标拖放离开目标元素出发

drop

当拖放操作在目标元素内投放时触发

默认情况下，该事件不被触发

原因：HTML页面默认行为，不允许拖放

解决方法：阻止页面的默认行为，需要为dragover 事件增加 event.preventDefault();

dataTransfer对象

作用：类似windows操作系统中的剪切板的功能。

功用

可以将源元素的信息（数据），存储在对象里

将存储在该对象中的源元素信息，提供给目标元素

type 类型，特指标识（一般使用id）

data 设置的数据内容(string)

getData(type)

clearData(type)

setDragImage()

作用：修改拖放过程中，鼠标跟随的鼠标的效果

draggable

标签元素要设置draggable=true，否则不会有效果

5.SVG

SVG 不属于HTML5专有内容

HTML5中提供了SVG原生支持

是一种XML技术来描述二维图形的一种语言

可以使用三种方式描述二维图形

矢量图

文本

优势

可通过文本编辑器来创建和修改。

svg可被搜索引擎，索引，脚本化和压缩

svg可在任何的分辨率下被高质量的打印

svg可在图像质量不下降的情况下被放大

与Canvas区别

SVG不依赖屏幕分辨率

Canvas依赖

SVG支持事件绑定

Canvas不支持

SVG 适用大型渲染区域的程序（例如百度地图）

Canvas适合做网页游戏，SVG不适合

Canvas可以将内容保存为.jpg格式图片

区别

如何选择

https://msdn.microsoft.com/zh-cn/library/gg193983(v=vs.85).aspx

网页中的小图标

天然适用响应式页面

页面放大，缩小，图片效果不改变

页面中的动画特效

参考

http://www.w3school.com.cn/svg/index.asp

http://www.iconsvg.com/

使用方式

使用SVG标签嵌入在HTML页面

内嵌在XHTML中

SVG元素

常规图形

注意

利用svg绘制的所有图形，必须定义在<svg>元素内

利用svg绘制的所有图形都与HTML页面有关，可以绑定事件

svg绘制的图形，默认大小 300*150，可以使用style方式来设置属性（不同于canvas）

矩形

<rect>

width和height 宽和高

注意：必须使用属性方式，不能使用样式方式

fill 填充颜色

stroke 描边颜色

stroke-width 描边宽度

注意：属性都可以用样式来写

r 半径

cx和cy 圆心

圆形跟随鼠标

注意：

SVG提供的所有元素都可以绑定事件

SVG提供的特殊属性，并不能像HTML元素的属性来操作(Dom)

事件绑定

案例：圆形跟随鼠标移动效果

svg提供的元素的特殊属性并不能像html元素的属性一样去操作。

myCircle.setAttribute(\"cx\

椭圆

rx 水平半径

ry 垂直半径

直线

<line>

x1 y1 起点

x2 y2 终点

stroke 线条颜色

注意：默认没有颜色，需要设置

stroke-width 线条宽度

用line绘制折线结合部效果不好，折线采用polyline绘制

折线

points 坐标x和y之间用逗号分隔，多个坐标之间用空格分隔

默认将折线中的区域进行填充

如果不需要填充效果，需要设置fill，设置填充颜色

transparent

绘制空心矩形，结合部要注意调整

一般只用来绘制折线，绘制多边形采用polygon

多边形

polygon

points

同 polyline

stroke-linejoin

同canvas

stroke-miterlimit

特效元素

渐变元素都必须在<defs>元素内

线形渐变

基准线

使用<stop>设置渐变的颜色

位置 offset

颜色 stop-color

透明度 stop-opacity

数值必须为百分值

通过图形元素的fill属性，设置为 url(#渐变对象ID)

渐变代码

扇形渐变

滤镜

高斯模糊

feGaussianBlur

in=\"SourceGraphic\"

stdDeviation=\"5\" 模糊程度

注意：是设置内容，需要定义在<defs>元素中

使用： filter=url(#id)

two.js

https://two.js.org/

专注于矢量图

深度实现具有动画效果的矢量图

支持动画效果

基本使用

//获取容器（一般定义为div，不使用svg或canvas） var d = document.getElementById(\"d\

makerect

 收藏

立即使用

图1-8 数据仓库体系结构

 收藏

立即使用

你是你吃出来的

 收藏

立即使用

Html5

 收藏

立即使用

CSS3

街角咖啡

职业：软件开发人员培训师

去主页





0 条评论

回复删除



取消

下一页