HTML5笔记

前端学习笔记专栏区别于官网中全面的知识讲解，主要记录学习技术栈时对于重点内容的提炼，便于对技术栈知识的快速回顾以及使用

1.canvas元素

• 内部坐标：坐标均以左上角为(0, 0)，单一坐标均作为起始坐标
• 创建对象：

<canvas id="myCanvas" width="200" height="100"></canvas>var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

• 绘制线条：

ctx.moveTo(0,0); // 定义开始坐标
ctx.lineTo(200,100); // 定义结束坐标
ctx.stroke(); // 绘制线条

• 绘制圆：

ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2*Math.PI); // (95, 50)为圆心，40为半径，（0，2*Math.PI）对应绘制周长
ctx.stroke();

• 定义背景颜色/图案：ctx.fillStyle
• 定义字体：ctx.font
• 绘制矩形：ctx.fillRect(x, y, width, height)
• 绘制实心文本：ctx.fillText(text, x, y)
• 绘制空心文本：ctx.strokeText(text, x, y)
• 绘制图片：ctx.drawImage(img, x, y);

2.SVG元素

• canvas元素
  • 依赖分辨率
  • 不支持事件处理器
  • 弱的文本渲染能力
  • 能够以 .png 或 .jpg 格式保存结果图像
  • 最适合图像密集型的游戏，其中的许多对象会被频繁重绘
• svg元素
  • 不依赖分辨率
  • 支持事件处理器
  • 最适合带有大型渲染区域的应用程序（比如谷歌地图）
  • 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
  • 不适合游戏应用

3.拖放

function allowDrop(ev) {ev.preventDefault();
}function drag(ev) {ev.dataTransfer.setData("Text",ev.target.id);
}function drop(ev) {ev.preventDefault();var data=ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));
}<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div><img id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)">

4.地图定位

function getLocation(){if (navigator.geolocation) {navigator.geolocation.getCurrentPosition(showPosition,showError);}else x.innerHTML="该浏览器不支持定位。";
}function showPosition(position) {x.innerHTML="纬度: " + position.coords.latitude + "<br>经度: " + position.coords.longitude;    
}function showError(error) {switch(error.code) {case error.PERMISSION_DENIED:x.innerHTML="用户拒绝对获取地理位置的请求。"break;case error.POSITION_UNAVAILABLE:x.innerHTML="位置信息是不可用的。"break;case error.TIMEOUT:x.innerHTML="请求用户地理位置超时。"break;case error.UNKNOWN_ERROR:x.innerHTML="未知错误。"break;}
}

5.video/audio

<video id="video1" width="420"><source src="mov_bbb.mp4" type="video/mp4"><source src="mov_bbb.ogg" type="video/ogg">您的浏览器不支持 HTML5 video 标签。
</video>
<audio controls><source src="horse.ogg" type="audio/ogg"><source src="horse.mp3" type="audio/mpeg">您的浏览器不支持 audio 元素。
</audio>// 支持通过js控制DOM元素的play播放、pause方法
function playPause() { var myVideo = document.getElementById("video1")if (myVideo.paused) myVideo.play()else myVideo.pause()
}

6.input

• 选色器：<input type="color">
• 时间选择：<input type="date">
• 邮箱/链接/号码校验：<input type="email/url/tel">
• 数字区间：<input type="range" min="1" max="10">
• 数字：<input type="number" min="1" max="5">

7.语义元素

• <section>：定义文档中的节，比如章节、页眉、页脚或文档中的其他部分
• <article>：定义独立的内容
• <nav>：定义导航链接的部分
• <aside>：定义页面主区域内容之外的内容（比如侧边栏）
• <header>：描述了文档的头部区域，主要用于定义内容的介绍展示区域
• <footer>：描述了文档的底部区域
• <figure>：规定独立的流内容（图像、图表、照片、代码等等）
• <figcaption>：定义<figure>的标题，应该被置于"figure"的第一个或最后一个子元素的位置

8.web存储

• localStorage与sessionStorage
• web sql与indexedDB（单独篇章）

9.localForge

将indexedDB封装成第三方库，可以通过类似于localStorage的调用方式使用；内置优雅降级，在不支持indexedDB或web sql时使用localStorage

1.vue引入

npm install localforageimport localforage from "localforage";
localforage.config({driver: localforage.INDEXEDDB});
Vue.prototype.$localforage = localforage;

2.调用方式

• promise方式：localforage.setItem('key', 'value').then(function)
• 回调方式：localforage.setItem('key', 'value', function)

3.数据API

• 获取：getItem(key, successCallback)
• 设置：setItem(key, value, successCallback)
• 删除：removeItem(key, successCallback)
• 清空：clear(successCallback)
• 长度：length(successCallback)
• 索引：key(keyIndex, successCallback)
• 全量：keys(successCallback)
• 迭代：iterate(iteratorCallback, successCallback)

4.设置API

• setDriver(driverName/[driverNames])
  • 强制使用特定的驱动或者固定优先级顺序的驱动
  • driverName可选项
    • localforage.INDEXEDDB
    • localforage.WEBSQL
    • localforage.LOCALSTORAGE
• config(options)
  • 设置全局通用的配置，必须在调用数据API前调用该API
  • options参数
    • driver：驱动，规则与setDriver相同
    • name：数据库名称，默认值：localforge
    • size：数据库大小，仅用于web sql
    • storeName：仓库名称，默认值：keyvaluepairs
    • version：数据库版本
    • description：数据库描述

5.驱动API

• 自定义驱动：defineDriver(myCustomDriver)
• 返回正在使用驱动：driver()
• 确定驱动是否启动：ready()
• 判断浏览器是否支持driverName：supports(driverName)

6.多实例

• 创建返回localForge实例：createInstance(config)
• 删除数据库/仓库：dropInstance({ name: '', storeName: '' })

10.web worker

使用场景多为需要复杂计算的操作，如大量数据处理等等

1.限制

• 同源：必须与主线程文件同源
• DOM：无法使用document、window、parent等对象，但可以使用navigator和location对象
• 通信：与主线程不在同一上下文，需要通过信息传递通信
• 脚本：不能执行alter、confirm方法，但可以使用XMLHttpRequest发出ajax请求
• 文件：无法读取本地文件，加载的脚本必须来自网络

2.主线程调用

// 根据脚本文件创建线程
let worker = new Worker('work.js')// 向线程传递信息
worker.postMessage('hello')
worker.postMessage({msg: 'hello'})// Transferable Objects传递二进制数据，仅在单一线程可用
let buffer = new ArrayBuffer(1);
worker.postMessage(buffer, [buffer])// 接收线程信息
worker.onmessage = function(event) {console.log(event.data)worker.postMessage('receive')
}// 接收线程错误
worker.onerror = function(event) {console.log(event)
}// 关闭线程
worker.terminate()

3.worker线程执行

// 加载其他脚本
importScripts('script.js')// 接收主线程信息
onmessage = function (event) {let data = e.dataswitch (data) {case 'start':// 向主线程传递信息postMessage('worker start')breakcase 'stop':postMessage('worker stop')// 内部关闭线程close()break;};
}

4.worker实例

// 线程中轮询，判断与缓存是否一致决定是否传递信息
function createWorker(f) {let blob = new Blob(['(' + f.toString() +')()'])let url = window.URL.createObjectURL(blob)let worker = new Worker(url)return worker
}let pollingWorker = createWorker(function (e) {let cachefunction compare(new, old) {}setInterval(function () {fetch('/my-api-endpoint').then(function (res) {let data = res.json();if (!compare(data, cache)) {cache = data;self.postMessage(data);}})}, 1000)
})pollingWorker.onmessage = function () {}
pollingWorker.postMessage('init')

11.SSE

网页自动获取来自服务器的更新，适用于服务器单向高频的数据发送

// 前端开启轮询
const source = new EventSource('/sse');
source.onopen = () => {console.log('轮询开启');
}
source.onmessage = (res) => {console.log('获得的数据是:' + res.data );
}
source.onerror = (err) => {console.log(err);
}// node.js后端传递信息
const http = require('http')
const fs = require('fs')
const server = http.createServer((req, res) => {const url = req.url;if (url === '/') {const data = fs.readFileSync('./index.html')res.end(data)} else if (url === '/sse') {res.setHeader("Content-type", "text/event-stream")setInterval(() => {res.write('data:' + new Date() + '\r\n\r\n')}, 2000);}
})
server.listen(3000)

12.WebSocket

客户端与服务端全双工通信

let ws = new WebSocket("ws://localhost:8080");// 显示指定收到的二进制数据类型
ws.binaryType = 'blob'// 判断web socket状态
switch (ws.readyState) {case WebSocket.CONNECTING:// do somethingbreak;case WebSocket.OPEN:// do somethingbreak;case WebSocket.CLOSING:// do somethingbreak;case WebSocket.CLOSED:// do somethingbreak;default:// this never happensbreak;
}ws.onopen = function(evt) {let data = new ArrayBuffer(10000000)// 发送信息ws.send(data)if (ws.bufferedAmount === 0) {// 发送完毕} else {// 发送还没结束}
};ws.onmessage = function(evt) {console.log( "Received Message: " + evt.data)ws.close()
}wx.onerror = function(evt) {console.log("Connection error" + evt)
}ws.onclose = function(evt) {console.log("Connection closed" + evt)
}