浏览器内核(渲染引擎)
- IE浏览器内核:Trident内核,也是俗称的IE内核;
- Chrome浏览器内核:统称为Chromium内核或Chrome内核,以前是Webkit内核,现在是Blink内核;
- Firefox浏览器内核:Gecko内核,俗称Firefox内核;
- Safari浏览器内核:Webkit内核;
- Opera浏览器内核:最初是自己的Presto内核,后来是Webkit,现在是Blink内核;
- 360浏览器、猎豹浏览器内核:IE+Chrome双内核;
- 搜狗、遨游、QQ浏览器内核:Trident(兼容模式)+Webkit(高速模式);
- 百度浏览器、世界之窗内核:IE内核;
- 2345浏览器内核:以前是IE内核,现在也是IE+Chrome双内核;
- 关于移动端:
- 移动端的浏览器内核主要说的是系统内置浏览器的内核。
目前移动设备浏览器上常用的内核有 Webkit,Blink,Trident,Gecko 等,其中 iPhone 和 iPad 等苹果 iOS 平台主要是 WebKit,Android 4.4 之前的 Android 系统浏览器内核是 WebKit,Android4.4 系统浏览器切换到了Chromium,内核是 Webkit 的分支 Blink,Windows Phone 8 系统浏览器内核是 Trident。
- 移动端的浏览器内核主要说的是系统内置浏览器的内核。
了解HTML5
HTML5属于上一代HTML的新迭代语言,设计HTML5最主要的目的是为了在移动设备上支持多媒体!!! 例如: video 标签和 audio 及 canvas 标记 ◆ 新特性: 1. 取消了过时的显示效果标记 和... 2. 新表单元素引入 3. 新语义标签的引入 4. canvas标签(图形设计) 5. 本地数据库(本地存储) 6. 一些API ◆ 好处: 1. 跨平台 例如:比如你开发了一款HTML5的游戏,你可以很轻易地移植到UC的开放平台、Opera的游戏中心、Facebook应用平台,甚至可以通过封装的技术发放到App Store或Google Play上,所以它的跨平台性非常强大,这也是大多数人对HTML5有兴趣的主要原因。 ◆ 缺点: 1. pc端浏览器支持不是特别友好,造成用户体验不佳
新语义标签
http://www.w3school.com.cn/html/html5_semantic_elements.asp
....
语义标签兼容性处理
解决方案一:通过创建元素的方式,然后将元素转化为块级元素即可
document.createElement("header");
解决方案二:通过引用第三方js插件方式(本质也是用createElement方式)
多媒体标签及属性介绍
☞视频 属性:controls 显示控制栏 属性:autoplay 自动播放 属性:loop 设置循环播放 ☞音频 属性:controls 显示控制栏 属性:autoplay 自动播放 属性:loop 设置循环播放 ☞video标签支持的格式 http://www.w3school.com.cn/html5/html_5_video.asp
☞ 多媒体标签在网页中的兼容效果方式
新表单元素及属性
智能表单控件
email: 输入合法的邮箱地址 url: 输入合法的网址 number: 只能输入数字 range: 滑块 color: 拾色器 date: 显示日期 month: 显示月份 week : 显示第几周 time: 显示时间
表单属性
◆ form属性: autocomplete = on(默认) | off 自动完成 novalidate = true(默认) | false 是否关闭校验 ◆ input属性: autofocus: 自动获取焦点 placeholder: 占位符 (提示信息) multiple: 实现多选效果 form:规定输入字段所属的一个或多个表单。list:12312123121231212312required: 必填项, oninvalid="setCustomValidity('必填内容')"
HTMl5中的API
获取页面元素及类名操作和自定义属性
☞ document.querySelector("选择器"); 备注: 选择器: 可以是css中的任意一种选择器 通过该选择器只能选中第一个元素。 ☞ document.querySelectorAll("选择器"); 备注: 与document.querySelector区别: querySelectorAll 可以选中所有符合选择器规则的元素,返回的是一个列表。querySelector返回的只是单独的一个元素 ☞ Dom.classList.add("类名"): 给当前dom元素添加类样式 ☞ Dom.classList.remove("类名"); 给当前dom元素移除类样式 ☞ Dom.classList.contains("类名"); 检测是否包含类样式 ☞ Dom.classList.toggle("active"); 切换类样式(有就删除,没有就添加) ☞ 自定义属性 data-自定义属性名 备注: 在标签中,以data-自定义名称 1. 获取自定义属性 Dom.dataset 返回的是一个对象 Dom.dataset.属性名 或者 Dom.dataset[属性名] 注意:属性名是不包含data- 2. 设置自定义属性 Dom.dataset.自定义属性名=值 或者 Dom.dataset[自定义属性名]=值;
文件读取
☞ FileReader FileReader 接口有3个用来读取文件方法返回结果在result中 readAsBinaryString ---将文件读取为二进制编码 readAsText ---将文件读取为文本 readAsDataURL ---将文件读取为DataURL ☞ FileReader 提供的事件模型 onabort 中断时触发 onerror 出错时触发 onload 文件读取成功完成时触发 onloadend 读取完成触发,无论成功或失败 onloadstart 读取开始时触发 onprogress 读取中
获取网络状态
☞ 获取当前网络状态 window.navigator.onLine 返回一个布尔值 ☞ 网络状态事件 1. window.ononline 2. window.onoffline
本地存储
☞ 发展: 随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据,传统方式我们以document.cookie来进行存储的,但是由于其存储大小只有4k左右,并且解析也相当的复杂,给开发带来诸多不便,HTML5规范则提出解决方案,使用sessionStorage和localStorage存储数据。 ☞ localStorage: 1. 永久生效 2. 多窗口共享 3. 容量大约为20M ◆ window.localStorage.setItem(key,value) 设置存储内容 ◆ window.localStorage.getItem(key) 获取内容 ◆ window.localStorage.removeItem(key) 删除内容 ◆ window.localStorage.clear() 清空内容 ☞ sessionStorage: 1. 生命周期为关闭当前浏览器窗口 2. 可以在同一个窗口下访问 3. 数据大小为5M左右 ◆ window.sessionStorage.setItem(key,value) ◆ window.sessionStorage.getItem(key) ◆ window.sessionStorage.removeItem(key) ◆ window.sessionStorage.clear()
操作多媒体
http://www.w3school.com.cn/html5/html5_ref_audio_video_dom.asp
注意: chrome已不再支持html中audio/video标签的autoplay属性,据说是突然播放声音怕到你,信? ◆ video 可配合muted(静音)属性可播放,或是video.play(); ◆ audio 就是不可以不可以不可以 设置方法:(网友给的,不过我就是找不到“Autoplay policy”,嗯...) 1、在chrome浏览器地址栏中输入:chrome://flags 2、搜索“Autoplay policy”,默认为“Default”,修改为 “No user gesture is required” 就可以了
Canvas画布
绘图工具
☞ 介绍canvas画布 ☞ 设置画布大小: 使用属性方式设置 ☞ 解决画布重绘问题 1. 设置一次描边 2. 开启新的图层 ctx.beginPath();
绘图方法
步骤:落笔(找落笔点坐标) -- 连线 -- 描边
ctx.moveTo(x,y) 落笔 ctx.lineTo(x,y) 连线 ctx.stroke() 描边 ctx.beginPath(); 开启新的图层 颜色: strokeStyle="值" 线宽: lineWidth="值" 备注:不需要带单位 线连接方式: lineJoin: round | bevel | miter (默认) 线帽(线两端的结束方式/圆角): lineCap: butt(默认值) | round | square 闭合路径: ctx.closePath()
渐变方案
☞ 线性渐变 var grd=ctx.createLinearGradient(x0,y0,x1,y1); 说明: x0-->渐变开始的x坐标 y0-->渐变开始的y坐标 x1-->渐变结束的x坐标 y1-->渐变结束的y坐标 grd.addColorStop(0,"black"); 设置渐变的开始颜色 grd.addColorStop(0.1,"yellow"); 设置渐变的中间颜色 grd.addColorStop(1,"red"); 设置渐变的结束颜色 ctx.strokeStyle=grd; ctx.stroke(); 备注: addColorStop(offse,color); 渐变的开始位置和结束位置介于0-1之间,0代表开始,1代表结束。中间可以设置任何小数 ☞ 径向渐变 ctx.createRadialGradient(x0,y0,r0,x1,y1,r1); 说明: (x0,y0):渐变的开始圆的 x,y 坐标 r0:开始圆的半径 (x1,y1):渐变的结束圆的 x,y 坐标 r1:结束圆的半径
填充效果
ctx.fill(); 设置填充效果 ctx.fillStyle="值"; 设置填充颜色
非零环绕原则
☞ 绘制一个如下图形
☞ 非零环绕原则: 1. 任意找一点,越简单越好 2. 以点为圆心,绘制一条射线,越简单越好(相交的边越少越好) 3. 以射线为半径顺时针旋转,相交的边同向记为+1,反方向记为-1,如果相加的区域等于0,则不填充。 4. 非零区域填充
绘制虚线
原理:设置虚线其实就是设置实线与空白部分直接的距离,利用数组描述其中的关系 例如: [10,10] 实线部分10px 空白部分10px 例如: [10,5] 实线部分10px 空白部分5px 例如: [10,5,20] 实线部分10px 空白5px 实线20px 空白部分10px 实线5px 空白20px 绘制: ctx.setLineDash(数组); ctx.stroke(); 例如: ctx.moveTo(100, 100); ctx.lineTo(300, 100); ctx.setLineDash([2,4]); ctx.stroke(); 注意: 如果要将虚线改为实线,只要将数组改为空数组即可。
绘制动画效果
☞ 绘制一个描边矩形: ctx.strokeRect(x, y, width, height) ☞ 绘制一个填充矩形: ctx.fillRect(x, y, width, height) ☞ 清除: ctx.clearRect(x, y, width, height) ☞ 实现动画效果: 1. 先清屏 2. 绘制图形 3. 处理变量
绘制文本
☞绘制填充文本 ctx.fillText(文本的内容,x,y) ☞绘制镂空文本 ctx.strokeText(); ☞设置文字大小: ctx.font="20px 微软雅黑" 备注: 该属性设置文字大小,必须按照cssfont属性的方式设置 ☞文字水平对齐方式【文字在圆心点位置的对齐方式】 ctx.textAlign="left | right | center" ☞文字垂直对齐方式 ctx.textBaseline="top | middle | bottom | alphabetic(默认)" ☞文字阴影效果 ctx.shadowColor="red"; 设置文字阴影的颜色 ctx.ShadowOffsetX=值; 设置文字阴影的水平偏移量 ctx.shadowOffsetY=值; 设置文字阴影的垂直偏移量 ctx.shadowBlur=值; 设置文字阴影的模糊度(值越大越模糊)
绘制图片
☞ 将图片绘制到画布的指定位置(图片加载完成再绘制) ctx.drawImage(图片对象,x,y); ☞ 将图片绘制到指定区域大小的位置(x,y指的是矩形区域的开始坐标,width和height指的是矩形区域的大小) ctx.drawImage(图片对象,x,y,width,height); ☞ 将图片的指定区域绘制到指定矩形区域内 ctx.drawImage(图片对象, sx, sy, swidth, sheight, dx, dy, dwidth, dheight); sx,sy 指的是要从图片哪块区域开始绘制,swidth,sheight是指截取图片区域的大小 dx,dy 是指绘制区域的位置,dwidth,dheight是指绘制区域的大小 ☞ 解决图片绘制到某一个区域的按原比例缩放绘制(失真效果): 让绘制的宽高比等于原始图片宽高比
绘制圆弧
☞ ctx.arc(x,y,radius,startradian,endradian[,direct]); 说明: x, y 圆心的坐标 radius 半径 startradian 开始弧度(角度和弧度的关系: 角度:弧度= 180 : Math.PI) endradian 结束弧度 direct 方向(默认顺时针false) true 代表逆时针 ☞ 0度角在哪? 以圆心为中心向右为0角 顺时针为正,逆时针为负 ☞ 特殊值: 0度 = 0弧度 45度 = Math.PI / 4 60度 = Math.PI / 3 90度 = Math.PI / 2 180度 = Math.PI 360度 = 2 * Math.PI ☞ 绘制圆上任意点:(注意:弧度,角度和弧度的关系: 角度:弧度= 180 : Math.PI) 公式: x = ox + r * Math.cos(弧度) y = oy + r * Math.sin(弧度) ox: 圆心的横坐标 oy: 圆心的纵坐标 r: 圆的半径
平移【坐标系圆点的平移】
ctx.translate(x,y); 特点: 通过该方法可以将画布原点的位置进行重新设置。 注意: 1. translate(x,y) 中不能设置一个值 2. 与moveTo(x,y) 的区别: moveTo(x,y) 指的是将画笔的落笔点的位置改变,而坐标系中的原点位置并没有发生改变 translate(x,y) 是将画布坐标系中的原点位置发生改变
旋转【坐标系旋转】
ctx.rotate(弧度) (注意是弧度,角度和弧度的关系: 角度:弧度= 180 : Math.PI)
伸缩
ctx.scale(x,y) 备注: 沿着x轴和y轴缩放 x,y 为倍数 例如: 0.5 1