Html5

类似于windows画图

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

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

只能用Canvas的API

手机端页面游戏几乎全是

PC端也大量使用

<canvas></canvas>

默认300*150

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

getContext（）

返回值：画布对象

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

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

问题：定义<canvas>元素的宽度和高度用CSS设置，将影响绘制出来图形的高宽比，需要改用<canvas>中的属性width,height

实心矩形

空心矩形

清除指定区域矩形

填充颜色

描边颜色

透明度

线型渐变

扇形渐变（射线）

方法

属性

shadowColor

shadowOffsetX

shadowOffsetY

shadowBlur

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

方法

lineWidth

lineCap

lineJoin

课后作业：随机圆

moveTo(x,y)

lineTo(x,y)

lineWidth

lineCap

lineJoin

绘制图片

平铺图片

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

切割图片

画布方法

Canvas的Js库

作用：提供各种图表

特点：基于HTML5 canvas技术

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

柱状图

饼状图

曲线图

环型图

极地区域图

雷达图

定义

优点

缺点

定义

优点

缺点

.box{
display: flex;
}

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

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

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

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

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

主轴（main axis）

交叉轴（cross axis）

项目默认沿主轴排列

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

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

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

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

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

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

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

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

关键字：search

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

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

缺陷：验证逻辑不完整

关键字：url

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

作用：限制输入数字

属性：min max step

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

<input type="range" min="10" max="1000" value="50">

value:当前值

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

<input type="color">

date

week

month

<datalist id="myList">
    <option>请选择</option>
    <option>北京</option>
    <option>南京</option>
    <option>天津</option>
</datalist>
<input type="text" list="myList">

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

特点：数据与结构的分离

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

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

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

属性：value 表示当前进度值

进度条自动增加

<meter min="0" max="100" value="90" low="10" high="80"></meter>

low:低值预警

high:高值预警

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

提高代码可读性

<form action="form_action.asp" method="get" name="sumform">
<output name="sum"></output>
</form>

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

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

<input type="text" placeholder="请输入您的用户名">

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

<input type="email" multiple name="txtEmail">

自动获取焦点

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

<input type="password" id="pwd" form="myForm">

Required

Pattern

min,max,step

minlength,maxlength

validity

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

valid

valueMissing

typeMismatch

patternMismatch

tooLong

rangeUnderflow

stepMismatch

customError

存储空间限制

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

存储形式  key : value

浏览器有存储数目限制

1.服务器端md5加密

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

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

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

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

登录之后进入管理页面

用键值对方式存储

key

value

key

返回值

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

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

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

用键值对方式存储

key

value

key

返回值

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

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

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

目前仅safari支持该事件

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

GPS

北斗定位

基站定位

基于互联网

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

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

http://lbsyun.baidu.com/

web开发

注册百度开发者账号

学习百度地图的基本功能

百度地图的特点

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

帮助文档

1.引入百度JS库

2.建立容器

3.创建对象

4.初始化

控件

覆盖

信息框

定位

坐标转换

自动补全框

geolocation

if(navigator.geolocation){
var options = {
enableHighAcuracy: true
};
window.navigator.geolocation.getCurrentPosition(handleSuccess,handleError,options);
}else{
alert("您的浏览器不支持地理定位.")
}

function handleSuccess(positions){
var longitude = positions.coords.longitude;
var latitude = positions.coords.latitude;
var point = new BMap.Point(longitude,latitude);

var convertor = new BMap.Convertor();
var pointArr = [];
pointArr.push(point);
convertor.translate(pointArr,1,5,translateCallback);


}
function translateCallback(data){
if(data.status == 0){
var map = new BMap.Map("allmap");
//console.log(longitude,latitude);
map.centerAndZoom(data.points[0],17);

var marker = new BMap.Marker(data.points[0]);
map.addOverlay(marker);
marker.setAnimation(BMAP_ANIMATION_BOUNCE);
}
}
function handleError(error) {
switch(error.code){
case error.TIMEOUT:
console.log('超时');
break;
case error.PERMISSION_DENIED:
console.log('用户拒绝提供地理位置');
break;
case error.POSITION_UNAVAILABLE:
console.log('地理位置不可用');
break;
default:
break;
}
}

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

使用原生DOM实现

使用jQuery的插件

HTML5 中提供的拖拽功能

源元素

目标元素

dataTransfer对象

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

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

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

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

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

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

SVG不依赖屏幕分辨率

SVG支持事件绑定

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

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

区别

如何选择

网页中的小图标

页面中的动画特效

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

http://www.iconsvg.com/

注意

矩形 

圆形

椭圆

直线

折线

多边形

渐变

高斯模糊

https://two.js.org/

专注于矢量图

支持动画效果

//获取容器 （一般定义为div，不使用svg或canvas）
var d = document.getElementById("d");
//设置画布参数（svg 或者 cavans 大小）
var params = {width:285,height:200};
//创建画布
var two = new Two(params);
//将画布附加到dom元素上
two.appendTo(d);
//设置图形（圆形）
var circle = two.makeCircle(100,100,50);
//填充颜色
circle.fill='#FF8000';
//边框色
circle.stroke="orange";

//绘制方形
var rect = two.makeRectangle(213, 100, 100, 100);
//填充颜色
rect.fill = 'rgb(0, 200, 255)';
//设置透明度
rect.opacity = 0.75;
//不绘制边框
rect.noStroke();

//页面更新，得到绘制效果
two.update();

makerect

子主题