0


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.拖放

functionallowDrop(ev){
    ev.preventDefault();}functiondrag(ev){
    ev.dataTransfer.setData("Text",ev.target.id);}functiondrop(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.地图定位

functiongetLocation(){if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition(showPosition,showError);}else x.innerHTML="该浏览器不支持定位。";}functionshowPosition(position){
    x.innerHTML="纬度: "+ position.coords.latitude +"<br>经度: "+ position.coords.longitude;}functionshowError(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方法functionplayPause(){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 localforage

import 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 =newWorker('work.js')// 向线程传递信息
worker.postMessage('hello')
worker.postMessage({msg:'hello'})// Transferable Objects传递二进制数据,仅在单一线程可用let buffer =newArrayBuffer(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.data
    switch(data){case'start':// 向主线程传递信息postMessage('worker start')breakcase'stop':postMessage('worker stop')// 内部关闭线程close()break;};}

4.worker实例

// 线程中轮询,判断与缓存是否一致决定是否传递信息functioncreateWorker(f){let blob =newBlob(['('+ f.toString()+')()'])let url = window.URL.createObjectURL(blob)let worker =newWorker(url)return worker
}let pollingWorker =createWorker(function(e){let cache
    functioncompare(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 =newEventSource('/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)}elseif(url ==='/sse'){
        res.setHeader("Content-type","text/event-stream")setInterval(()=>{
            res.write('data:'+newDate()+'\r\n\r\n')},2000);}})
server.listen(3000)

12.WebSocket

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

let ws =newWebSocket("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 =newArrayBuffer(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)}
标签: html5 笔记 前端

本文转载自: https://blog.csdn.net/qq_44242707/article/details/134288004
版权归原作者 洛千陨 所有, 如有侵权,请联系我们删除。

“HTML5笔记”的评论:

还没有评论