javascript高级程序设计（六）——2026.9.5

动画与canvas图形

requestAnimationFrame/cancelAnimationFrame

控制动画执行的方法。在动画完成或组件销毁时必须调用cancelAnimationFrame取消，否则容易内存泄露。

canvas

在开始和结束标签之间的内容是后备数据，会在浏览器不支持 <canvas> 元素时显示.

arduino 复制代码

<canvas id="drawing" width="200" height="200">A drawing of something.</canvas>

webgl上下文

判断上下文

javascript 复制代码

let drawing = document.getElementById("drawing");
// 确保浏览器支持<canvas>

if (drawing.getContext) {
    try {
        gl = drawing.getContext("webgl");
    } catch (ex) {
    // 什么也不做
    }
    if (gl) {
    // 使用 WebGL
    } else {
        alert("WebGL context could not be created.");
    }
}

File api与Blob api

File api

file对象
- name------本地系统中的文件名
- size------文件大小
- type------MINE类型
- lastModifiedDate------最后更改时间
- slice(start,end)------返回一个Blob实例对象
FileReader类型------异步获取方式
- readAsText(file,encoding)------从文件中读取纯文本内容并保存到result属性中
- readAsDateURL(file)------读取文件并将内容的数据URI保存在result属性中
- readAsBinaryString(file)------以每个支付的二进制数据保存
- readAsArrayBuffer(file)------以ArrayBuffer形式保存在result属性中
- abort()------中止读取操作

ini 复制代码

let reader= new FileReader();
if (/image/.test(files[0].type)) {
    reader.readAsDataURL(files[0]);
    type = "image";
} else {
    reader.readAsText(files[0]);
    type = "text";
}
reader.onerror=function(){};
reader.onprogress=function(){};
reader.onload=function(){};
reader.onabort=function(){};

FileReaderSync类型------同步获取文件方法，但只能在worker线程中使用。

Blob对象

实例属性
- size------返回Blob对象包含的数据大小（以字节为单位）
- type------返回一个字符串，表面该Blob对象所包含的MINE类型
实例方法
- arrayBuffer()------返回一个Promise，会兑现一个包含Blob全部内容的ArrayBuffer
- bytes()------返回一个Promise，会兑现一个包含Blob全部内容的Unit8Array
- slice(start,end)------返回一个新Blob对象（从start到end），对切片上传大文件时非常有用。
- stream()------返回一个流，用于流式读取Blob内容
- text()------一个Promise的字符串内容

对象URL和Blob

将file对象利用window.URL.createObjectURL()转换为blob URL（即对象URL）。

ini 复制代码

/// input type为"file"时
fileList.addEventListener("change",(event)=>{
    let info="",
    output=document.getElementById("output"),
    files=event.target.files,
    reader=new FileReader(),
    url=window.URL.createObjectURL(files[0]);
    if(url){
        if(/image/.test(files[0].type)){
            output.innerHTML=`<img src="${url}">`;
        }else{
            ...
        }
    } else {
    
    }
})

拖拽方法

drop------放下，拖拽后松开鼠标左键后触发
dragenter------鼠标拖动进入动作
dragover------鼠标推动悬停或移动
其中drop要生效必须要将dragover的默认行为阻止。
事件的目标是event.dataTransfer.files;

Notifications API（通知行为）

请求通知权限

Notification.requestPermission().then((permission)=>{})

granted------明确授权
denied------拒绝授权

显示、隐藏通知

通知主体

arduino 复制代码

new Notification("title",{
 body: 'yes',
 image: "",
 vibrate:true // 是否震动
})

显示与关闭

ini 复制代码

const n = new Notification('I will close in 1000ms');
setTimeout(() => n.close(), 1000);

生命周期回调
- onshow------通知显示时触发
- onclick------通知被点击时触发
- onclose------通知消失或通过close()关闭时触发
- onerror------发生错误时触发