H5工程师开发班

css3基础课程

第一章:2D+3D变换

2D变换
ransform:rotate() 旋转函数 (deg) deg 度数
skew(X,Y) 倾斜函数 (deg)
skewX()
skewY()
scale(X,Y) 缩放函数 (正数、负数和小数)
scaleX()
scaleY()
translate(X,Y) 位移函数(px)
translateX()
translateY()
matrix(a,b,c,d,e,f) 矩阵函数

3D变换
transform-style(preserve-3d) 建立3D空间
perspective 视镜
perspective- origin 视镜基点
x:left/center/right/length/%
y:top/center/bottom/length/%
transform 新增函数
rotateZ()
translateZ()
scaleZ()translate3d(x,y,z)
backface-visibility: hidden;

第二章:动画过渡

transition:property duration timing-function delay;
transition-property:过渡属性的名称
transition-duration:过渡属性花费的时间
transition-timing-function:过渡效果速度曲线(贝塞尔曲线详解)
transition-delay:过渡效果延迟时间
过渡完成事件:transitionend

第三章:自定义动画

animation-name: 动画名称
animation-duration: 动画执行时间
animation-timing-function: 动画速度曲线(贝塞尔曲线详解)
animation-delay:动画效果延迟时间
animation-iteration-count: 动画执行次数
animation-direction:动画执行方向
animation-play-state:动画执行状态
animation-fill-mode:动画执行过程效果是否可见
@keyframes:规定动画关键帧
from{} to{}
0%{} 100%{}
动画事件:animationstart/animationiteration/animationend

第四章:新增功能(选择器、json、自定义data属性、class列表属性、js异步加载)

选择器:
document.querySelector() 选择单个元素
document.querySelectorAll() 选择所有的
document.getElementsByClassName() 通过类名选择

class列表属性:
classList
length : class的长度
add() : 添加class方法
remove() : 删除class方法
toggle() : 切换class方法
contains() : 判断类名是否存在返回bool值

js异步加载:
defer=“defer ”: 延迟加载
async =“async”: 异步加载
js无阻碍加载

json2
parse() stringify()

自定义data属性 dataset.value

第五章:元素拖拽

draggable :true

拖拽元素(被拖拽元素对象)事件 :
ondragstart : 拖拽前触发
ondrag :拖拽前、拖拽结束之间,连续触发
ondragend :拖拽结束触发

目标元素(拖拽元素被拖到的对象)事件 :
ondragenter :进入目标元素触发
ondragover :进入目标、离开目标之间,连续触发
ondragleave :离开目标元素触发
ondrop :在目标元素上释放鼠标触发

dataTransfer对象 FileReader(读取文件信息)

第六章:离线存储、本地存储

离线存储
1、服务器设置头信息 : AddType text/cache-manifest .manifest
2、html标签加 : manifest=“xxxxx.manifest”
3、写manifest文件 :
离线的清单列表先写 : CACHE MANIFEST
FALLBACK : 第一个网络地址没获取到,就走第二个缓存的
NETWORK :无论缓存中存在与否,均从网络获取
本地存储
sessionStorage
session临时回话,从页面打开到页面关闭的时间段
窗口的临时存储,页面关闭,本地存储消失
localStorage永久存储(可以手动删除数据)
Storage API
setItem():设置数据,(key,value)类型,类型都是字符串可以用获取属性的形式操作
getItem():获取数据,通过key来获取到相应的value
removeItem():删除数据,通过key来删除相应的value
clear():删除全部存储的值

第七章:历史管理、web workers(多线程处理数据)

历史管理
onhashchange :改变hash值来管理
history :服务器下运行
pushState : 三个参数 :数据 标题(都没实现) 地址(可选)
onpopstate事件 : 读取数据
event.state
new Worker(‘后台处理的JS地址’)利用postMessage传输数据
onmessage = function(){} 监听接收信息
importScripts(‘导入其他JS文件’)
self : 指向全局 worker 对象
close()方法,立刻停止worker运行

第八章:地理信息

navigator.geolocation
单次定位请求 :getCurrentPosition(请求成功,请求失败,数据收集方式)
请求成功函数经度 : coords.longitude
纬度 : coords.latitude
准确度 : coords.accuracy
海拔 : coords.altitude
海拔准确度 : coords.altitudeAcuracy
行进方向 : coords.heading
地面速度 : coords.speed
请求的时间: new Date(position.timestamp)
百度地图、高德地图运用

第九章:跨文档操作、ajax跨域

跨文档操作
iframe内页:
父页面操作子页面:contentWindow
子页面操作父页面:window.top(找到最顶级的父页面)/parent(第一父页面)
新窗口页:
父页面操作子页面:window.open
子页面操作父页面:window.opener

不同域跨文档
postMessage(“发送的数据”,”接收的域”)
message事件监听
ev.origin 发送数据来源的域
ev.data 发送的数据

ajax跨域
XMLHttpRequest 新增功能
跨域请求:修改服务端头信息
IE兼容:XDomainRequest
进度事件:upload.onprogress(ev)上传进度(实现文件上传进度条)
ev.total 发送文件的总量
ev.loaded 已发送的量
FormData 构建提交二进制数据

媒体流技术(4个课时)

一、视频video

1、视频格式:ogg、MEPG4、WebM

2、video标签属性:Src、Autoplay 、Poster、Autobuffer、controls、Width、Height、Loop、Preload...

3、js API:play()、pause()、load()

4、全屏: webkit element.webkitRequestFullScreen(); Firefox element.mozRequestFullScreen(); W3C element.requestFullscreen();

5、退出全屏:webkit document.webkitCancelFullScreen(); Firefox document.mozCancelFullScreen(); W3C document.exitFullscreen();

6、API属性:currentTime duration volume muted false /truepaused ended error currentSrc loadstart progress suspend emptied stalled play pause loadedmetadata loadeddata waiting playing canplay canplaythrough seeking seeked timeupdate ended ratechange durationchange volumechange

7、兼容性处理:source video.js

8、canvas截图功能及视频渲染

二、音频audio

1、音频格式:Ogg、MP3 、Wav

2、audio属性:autoplay、controls、loop 、preload、src...

3、API属性:currentTime 、 duration 、 volume 、muted 、 false /truepaused 、ended、 error currentSrc 、loadstart、 progress、 suspend、 emptied 、stalled、 play、 pause 、loadedmetadata、 loadeddata 、waiting、 playing 、canplay、 canplaythrough 、seeking、 seeked 、timeupdate、 ended、 ratechange、 durationchange、volumechange

4、兼容性处理:audio.js

三、流媒体技术

1、在线直播系统开发:navigator.getUserMedia

高级绘图(6课时)

一、canvas

1、getContext("2d"); 设置绘图环境 、beginPath() :开始路劲、closePath():闭合路劲 、moveTo(x,y):将触笔移动到x,y点

2、lineTo(x,y):绘制到x,y点、stroke(): 触笔方法 画线 默认为黑色 、fill():填充方法 、rect(x,y,w,h):矩形路劲

3、save():保存路劲 、restore():恢复路劲

二、绘制矩形

1、fillRect(x,y,w,h) 填充实心矩形 、 strokeRect(x,y,w,h) 绘制空心矩形 、clearRect(x,y,w,h) 清除矩形选区

2、设置绘图样式:fillStyle: 填充颜色 、strokeStyle: 触笔颜色 、lineWidth: 触笔宽度(线宽)

3、图形边界样式:lineJoin : 边界连接点样式、miter(默认值),round(圆角),bevel(斜角) lineCap: 端点样式 、butt(默认值),round(圆角),square(高度多出线宽一半)

三、绘制圆形+绘制曲线+canvas变换

1、绘制圆形:arc(x,y,r,0,360,false)

2、绘制曲线:arcTo(x1,y1,x2,y2,r) 、quadraticCurveTo(dx,dy,x1,y1)、bezierCurveTo(dx1,dy1,dx2,dy2,x1,y1)

3、canvas变换:translate(x,y)、rotate(弧度): 旋转 弧度公式 :角度*PI/180

四、绘制图片

1、绘制图片:onload图片预加载 、drawImage(img,x,y,w,h);

2、设置背景:createPattern(img,平铺方式)、平铺方式:repeat,repeat-x,repeat-y,no-repeat

3、颜色渐变:线性渐变:createLinearGradient(x1,y1,x2,y2)、径向渐变:createRadialGradient(x1,y1,r1,x2,y2,r2)、addColorStop(位置,颜色)

五、绘制文本

1、strokeText(文本,x,y)绘制空心文本、fillText(文本,x,y)绘制实心文本 、font = "font-size font-family" 注:尺寸 字体缺一不可

2、textAlign = "";文本左右对齐方式 、textBaseline文本上下对齐方式 、measureText(文本).width; 文本实际宽度(只有宽度值)

六、绘制阴影+像素操作+合成(叠加)

1、绘制阴影:shadowOffsetX,shadowOffsetY、x轴、y轴偏移、shadowBlur 阴影模糊度、shadowColor 、 阴影颜色、默认颜色:rgba(0,0,0,0)

2、像素操作:createImageData(sx,sy)、创建新的、空白的 ImageData 对象、getImageData(x1,y1,w,h)(必须是同源下面才能获取)、返回 ImageData 对象 、putImageData(img,x2,y2)、把图像数据(从指定的 ImageData 对象)放回画布上

3、合成(叠加): globalAlpha 设置或返回绘图的当前 alpha 或透明值、globalCompositeOperation 设置或返回新图像如何绘制到已有的图像上 source-over(默认)、source-atop、source-in 、source-out、destination-over、destination-atop、destination-in、destination-out、lighter、copy、xor

七、将画布导出为图片

1、将画布导出为图片:toDataURL

2、事件:isPointInPath(x,y)

3、插件库:http://jcscript.com

4、图表插件:echarts

SVG(3个课时)

一、绘制圆形+椭圆

1、与canvas绘图的区别、引入方式

2、circle:圆形 、圆心坐标:cx,cy、半径: r、fill 、 stroke 、 stroke-width 、 stlye样式 、fill = "none/transparent"

3、ellipse:椭圆 、cx 、cy、rx、ry

4、rect : 矩形 width height 宽高 、 坐标 x, y 、圆角 rx,ry

5、line :线条 x1,y1,x2,y2 stroke-opacity 透明 fill-opacity

二、折线+多边形

1、polyline:折线 、points:点坐标(x1 y1 x2 y2...)或(x1,y1,x2,y2....)

2、polygon:多边形 、折线闭合 fill-rule:evenodd/nonzero;

3、path: 路劲 d属性: M(起始坐标),L(结束坐标),H(水平线),V(垂直线),A(圆弧),Z(闭合路劲),C,S,Q,T 贝塞尔曲线

4、g标签:组合元素 设置元素公共属性

5、共用属性 transform = "translate(0,0)"

6、text标签:x, y, text-anchor(对齐start end middle) font-size

7、image 标签:x, y, width height xlink:href(图片地址)

8、defs/symbol标签

三、svg滤镜+svg渐变色

1、svg滤镜:feBlend、feColorMatrix 、feComponentTransfer、feComposite、feConvolveMatrix、 feDiffuseLighting、feDisplacementMap、feFloodfeGaussianBlur、feImage、feMerge、feMorphology、 feOffset、feSpecularLighting、feTile、feTurbulence、feDistantLight、fePointLight 、feSpotLight

2、svg渐变色:线性渐变:linearGradient 径向渐变:radialGradient

四、svg动画

1、svg动画:set 、不能连续的触发动画,只执行一次animate 基础动画属性

2、animateColor 、改变颜色,此元素已被废弃,可用animate替代

3、animateTransform 、 设置tansform属性的动画、animateMotion、 可以让SVG各种图形沿着特定的path路径运动

五、svg视窗+插件运用

1、svg视窗:viewBox=”x y width height” 、preserveAspectRatio=”xMinYmin none”

2、插件运用:snap.svg.js 、图表插件:highcharts

手机移动端事件处理

第一课、基础事件

1)touchstart

2)touchmove

3)touchend

第二课:event对象

1、取消默认事件

2、阻止冒泡

3、防止文字选中和阻止默认菜单

4、鼠标事件延迟

5、事件点透问题

第三课:touchEvent

1、touches

2、changedTouches

3、targetTouches

第四课:滑屏处理

1、拖拽原理分析

2、滑屏幻灯片简版

第五课:transform2D 变换

1、rotate()、scale()、skew()、translate()

2、left和top引起的回流问题及优化

3、处理transform中不能通过计算后样式获取的问题

第六课:transition 动画

1、 transition基本知识点

2、贝赛尔曲线运动

3、transitionend事件

4、transition 不执行的BUG

第七课:实例:移动端版页面制作

1、rem布局适配

2、横竖屏切换适配

3、fixed定位的BUG及替代方案

4、滑屏导航缓冲回弹动画的实现

5、完整版无缝滚动的滑屏幻灯片

6、滑屏选项卡

八、transform3D

1、滑动旋转的方块

2、3d多边体制作

3、正n边形的外角计算与正n边形的中心点计算

第九课:3D桌面切换

1、百分比配合怪异盒模型布局适配

2、animation的loading动画

3、立体三棱柱制作

4、页面绝对坐标获取

5、IOS下3D变换的兼容问题及解决方案

第十课:自定义滚动条

1、滚动条比例计算

2、图片随滚动条的按需加载

3、渲染优化-canvas(GPU渲染加速)

4、transition安卓卡顿BUG--3D硬件加速

第十一课:多指事件

1、双指操作图片缩放和旋转

2、安卓多指事件的兼容解决

3、勾股定理与Math.atan2(与X轴的绝对夹角)

4、实例:完整版的移动端相册

外加赠送:bootstrap响应式开发完整视频一套

H5接口

第一课:Web audio API

1、制作音频图形

2、利用 canvas 绘制音频

第二课:捕捉用户摄像头 – 媒体流

1、开启摄像头

2、参数

第三课:语音识别

第四课:设备电量

第五课:获取用户位置 – 地理位置

第六课:环境光

第七课:陀螺仪

第八课:Websocket-IM聊天窗口

第九课:NFC

第十课:震动

第十一课:网络环境