Web API是浏览器提供的原生接口而非JS内置功能；Geolocation需HTTPS/localhost环境且用户授权，调用前须检测存在性；Canvas需DOM就绪、正确设置宽高属性、注意大小写和DPR适配。
Web API 不是 JavaScript 语言的一部分，而是浏览器提供的、供 JS 调用的原生功能接口。你写 navigator.geolocation 或 canvas.getContext('2d')，调用的都不是 JS 自带的函数，而是浏览器暴露给 JS 的能力。
Geolocation API 怎么用？为什么 navigator.geolocation 可能为 undefined？
它依赖用户授权和运行环境：必须在 HTTPS（或 localhost）下才能启用；HTTP 页面会直接禁用 navigator.geolocation，返回 undefined。
- 检查前先确认协议：
window.location.protocol应为"https:"或"http:"（仅限localhost） - 调用前务必加存在性判断：
if (navigator.geolocation)，否则在不支持或被禁用时会报TypeError: Cannot read property 'getCurrentPosition' of undefined -
getCurrentPosition()是异步的，第二个参数是错误回调，常见错误码：error.code === 1表示用户拒绝授权，error.code === 2表示位置不可用（如飞行模式） - 不要在页面加载后立刻调用——部分浏览器（如 Safari）要求用户交互（如点击）触发，否则静默失败
Canvas API 绘图前必须做哪些初始化？getContext('2d') 返回 null 怎么办？
getContext('2d') 返回 null 通常不是代码写错，而是 DOM 节点没就绪或类型不匹配。
- 确保
元素已挂载到 DOM 中——不能在document.createElement('canvas')后立刻调用getContext，除非已插入文档 - 检查是否误用了其他上下文名，比如写成
getContext('webgl2')但浏览器不支持，或拼错为'2D'（大小写敏感，必须小写'2d'） -
width和height属性必须通过元素属性（而非 CSS）设置，否则绘图会拉伸失真：canvas.width = 600; canvas.height = 400; - 清空画布别只靠
ctx.clearRect(0, 0, w, h)——如果画布尺寸动态变过，要同步更新canvas.width/canvas.height，否则清除区域不对
Web API 的兼容性和权限模型怎么影响实际开发？
每个 API 都有自己的“开关条件”，不是写了就能跑。比如 Geolocation 需 HTTPS + 用户授权；Notification 需用户主动 requestPermission；Clipboard API 的 writeText() 必须在用户手势（click/tap）响应中调用，否则抛 NotAllowedError。
立即学习“Java免费学习笔记（深入）”；
- 不要假设所有 API 都可用：用
typeof API !== 'undefined'或'API' in window做运行时检测 - 移动端 Safari 对
Geolocation的后台定位支持极弱，watchPosition可能几分钟后自动停止 - Canvas 在高 DPI 屏幕（如 MacBook Retina）上默认模糊，需手动缩放：
const dpr = window.devicePixelRatio || 1;，然后按比例设置canvas.style.width/canvas.style.height并放大canvas.width/canvas.height
真正卡住人的往往不是语法，而是这些隐含的前提：协议、时机、权限、设备特性。漏掉任何一个，getCurrentPosition 就静默失败，getContext 就返回 null，而控制台可能连警告都不给。
