- Chapter 15 Canvas
- Chapter 16 HTML5
Chapter 15 Canvas
- <canvas>元素：设定区域。JS动态在这个区域中绘制图形。
- 苹果公司引导的。由几组API构成。
- 2D上下文普及了。WebGL（3D上下文）还未足够普及。
基本用法
- 首先：width、height属性确定绘图区域大小。后备信息放在开始和结束标签之间。
- getContext()：DOM获得这个canvas元素对象。再在这个对象上调用getContext()获取上下文，传入参数表示获取的是2d上下文还是WebGL上下文。
- toDataURL()方法，获取绘图区域中的图形对应的URL。注意，若canvas画布“不干净”，即来自不同的域，这个方法会报错。
2D上下文
- 绘制简单的2D图形。
- 坐标原点在canvas元素的左上角，原点坐标(0,0)
- 填充和描边：fillStyle和strokeStyle属性。
- 描边宽度由lineWidth属性控制。
- lineCap属性控制线条末端的形状
- lineJoin属性控制线条相交的方式。
- 绘制矩形：fillRect(),strokeRect()方法，clearRect()方法。4个参数：矩形的x,y坐标，矩形的宽度和高度。
- 绘制路径：
- 开始：beginPath()
- 一系列绘制方法
- 结束：closePath()/fill()/stroke()/clip()
- 是否在路径上：isPointInPath()
- 绘制文本：
- fillText()/strokeText()：4个属性：字符串、x、y坐标、可选的最大像素宽度
- 3个属性：font、textAlign、textBaseline
- 辅助确定文本大小：measureText()方法，返回TextMetrics对象，只有width属性。
- 变换：
- 例如rotate(angle)/scale()/translate()/transform()/setTransform
- 记录状态：save()
- 返回上一个状态：restore()
- 记录和返回都是以栈结构的方式，可以一级级进入或者返回。
- 记录和返回只作用于状态或者设置。
- 绘制图像（对<img>或者<canvas>图像进行处理）
- drawImage()：多种控制方式
- 阴影
- 渐变：
- createLinerGradient()/createRadiaGradient() ,addColorStop()
- 注意坐标匹配。
- 模式（重复的图像）createPattern()
- 使用图像数据（获取rgba）
- getImageData()获取原始图像数据，返回ImageData对象的实例。
- 上述对象拥有width、height、data属性。
- data属性是数组，每四位表示一个像素的数据，对应rgba
- 可以依次设置灰阶过滤器或者其他过滤器。
- putImageData()将图像数据绘制到画布上。
- 合成：
- globalAlpha属性：通用透明度
- globalCompositionOperation属性：合成方式。存在浏览器差异。
WebGL
- 类型化数组：视图--类型化视图。是WebGL项目的基础。
- 上下文：pdf P488-497
Chapter 16 HTML5 脚本编程
- HTML5增加了新标签，同时也花一定篇幅规定了一些JS的API，以简化复杂的操作。本章介绍了跨文档信息传递，拖放API，音频及视频，历史状态管理等一些操作。
跨文档消息传递（cross-document messaging:XDM)
- 利用postMessage()进行消息传递，postMessage()方法不仅可以在这里使用，功能就是“向另一个地方传送数据”。而XDM中，“另一个地方”指另一个域，一般将消息传给当前页面的<iframe>元素或者由当前页面弹出的窗口。
- 以当前页面的<iframe>元素包含另一个域为例：
- 当前页面需要做的：
- postMessage()传入两个参数：待传入的消息和消息的来源域---这就意味着实际上需要获得“另一个域”的window对象（代理）以在其上使用这个方法。见下个步骤。
- 可以通过document.getElementById("myframe").contentWindow;即contentWindow属性获取目标域的window对象或者代理。调用该方法即可传入数据。
- data不一定需要是字符串，但非字符串的情况在不同浏览器之间存在差异。可以利用JSON.stringify()/JSON.parse()处理字符串。
- 这种方法可以确保安全性，毕竟第二个参数是已知地址。
- <iframe>中的域需要做的：
- 会激发message事件。onmessage处理程序的事件对象event有三个重要属性。
- event的三个属性：data、origin、source
- 可以在确保origin（来源所在域）符合条件的情况下，处理data，再通过source（指向来源的window对象的代理）向来源发送消息，即调用：event.source.postMessage().
- 由于source只是可代理，所以能访问的属性和方法有限。建议只是用postMessage()方法。
- 注意到postMessage()方法是在待向其传送消息的域的代理对象上调用的。
原生拖放
- 注意到，HTML5提供了一些JS的API，向程序员暴露可以使用的属性或者方法，它本身更多的是规定浏览器在这些方法或者属性（或者事件）响应的时候提供一些怎样的显示效果。
- 拖放一般考虑3个阶段：被拖放的对象、拖放过程、放置的目标对象。
- 对应一些拖放事件：对于被拖放的对象，有dragstart/drag/dragend；对于放置的目标对象，有dragenter/dragover/dragleave或drop。很好理解。
- 自定义放置目标：针对有些元素默认是不允许作为放置目标的情况，由于默认是不允许，所以可以在dragenter和dragover中重写默认行为，即阻止默认行为的发生。以此来自定义放置目标。
- dataTransfer对象，为了在拖放操作时实现数据交换，是event的属性，用于从被拖放的元素向放置目标元素传递字符串格式的数据。
- setData()/getData()方法：设置和获取数据。getData()在drop事件中处理。注意在跨浏览器处理setData()的时候注意对短数据类型和MIME类型的处理。
- dropEffect/effectAllowed：两者配合，可以确定被拖放的元素能够执行哪种放置行为（而浏览器会对应给出显示的效果）。dropEffect在ondragenter事件处理程序中针对放置目标进行设置。而effectAllowed属性在ondragstart中针对被拖放的目标进行设置。
- 其他成员：addElement()/clearData()/setDragImage()/types等
- draggable属性：HTML5中的全局属性，规定元素是否可以被拖动。
媒体元素
- 针对HTML5中的<audio>和<video>元素。这两个元素的产生可以让我们减少使用FLASH插件等，更方便实现跨浏览器操作。
- 元素本身就拥有一些属性，且可以进行多个MIME类型和编解码器的选择。
- JS又规定了他俩的一些更加具体和详细的属性和事件，以减轻实现一些操作的繁琐的程序编写过程。
- 可以依赖play()或pause()实现自定义的媒体播放器，这只是代码编写的逻辑问题，比较简单。
- JS提供canPlayType()来检测编解码器的支持情况
- 注意到可能性probably>maybe>空值
- 所以传入MIME类型和编解码器的可能性大于只传入MIME类型的。很好理解。
- JS有原生的Audio构造函数，可以穿件audio实例并进行一些操作。
历史状态管理
- 针对“后退”和“前进”按钮失去作用，使得用户难以在不同的状态（页面状态）间进行切换。可以使用之前（13章）提到过的haschange事件监测状态的变化，以执行某些处理；或者使用HTML5中的历史状态管理API进行操作。
- haschange事件：URL参数列表（包括#后的所有字符串）发生变动的时候触发，主要用在Ajax中，用URL参数数列来保存状态或者导航信息。属性oldURL、newURL可以实现location.hash的功能。一般使用后者，因为支持oldURL和newURL的浏览器不多
- 状态管理API同样可以在不加载新页面的情况下改变浏览器的状态：history.pushState()，传入3个参数：状态对象，新状态标题和可选的URL，注意第二个参数至今不支持，所以可以写入空字符串，而第一个信息最好详尽的记录状态对象各方面的信息，以便随后只用。
- 在执行完这个方法后，新的状态信息会被加入历史状态栈。并且不会真正的向服务器发送请求。
- popstate事件：由于上述方法改变了历史栈，“后退”按钮可用了。在点击后退按钮的时候，触发popstate事件，其事件对象event包含pushState()第一个参数所指的状态对象（这就是为什么上面要求信息详尽的原因了）。注意到，浏览器加载第一个状态（页面）的时候，这个对象为null。
- replaceState()：传入参数与pushState()的一样，然而不会在历史状态栈中创建新状态，指挥重写当前状态。
- 注意pushState()的第三个参数务必是实际的URL，不然刷新的时候会导致404错误。
时间： 2024-10-07 06:08:40