<HeadFirst_HTML5> O'REILLY_Chap.7_画布

<HeadFirst_HTML5> O’REILLY_Chap.7_画布

本博客的FollowMeReading系列初衷是在线的读书笔记. 为方便后期查阅, 故写成博客形式, 使用关键字查询便可以快读的找到相关的内容.

FollowMeReading系列所选的书籍一般选自O’REILLY或Apress出版社, 尽量保证笔记内容的权威性.

FollowMeReading系列的博客标题格式为: <书名> 出版社章节数章节名, 方便大家在纸质版书籍中查找.

FollowMeReading系列博文中的内容大部分是原文, 非原文部分前面将有’博主’字样提醒.

感谢<HeadFirst_HTML5>作者 Eric Freeman & Elisabeth Robson
感谢<HeadFirst_HTML5>翻译 林琪 张伶

正文

原文

BULLTE POINTS(要点):

• 画布是一个元素, 可以放在页面上来创建一个绘制空间.

• 除非你指定, 否则画布没有默认的样式或内容(所以在画布上绘制内容或用CSS增加边框之前, 在页面上是看不见画布的).

• 页面上可以有多个画布. 当然, 需要为每个画布提供一个唯一的id, 以便使用JavaScript分别访问.

• 要指定画布元素的大小, 可以使用元素的 width 和 height 属性.

• 画布上的所有内容都使用JavaScript绘制.

• 要在画布上绘制, 首选需要创建一个上下文. 目前, 2D上下文是唯一的选择, 不过将来可能还会有其他上下文类型.

• 要在画布上绘制, 需要有一个上下文, 因为上下文提供了一个特定的接口(例如:2D或3D). 你可以从多种接口中选择来完成画布上的绘制

• 使用上下文属性和方法来访问画布.

• 要在画布中绘制一个矩形, 可以使用 context.fillRect 方法, 这个方法会创建一个矩形, 并填充指定的颜色.

• 要创建一个矩形轮廓, 可以使用 strokeRect 而不是 fillRect.

• 使用 fillStyle 和 stokeStyle 可以改变默认的填充和笔划颜色, 默认是黑色.

• 可以使用CSS中同样的格式指定颜色(例如: “black”, “#000000”, “rgb(0, 0, 0)” ), 记住要在 fillStyle 值两边加上引号.

• 并没有一个 fillCircle 方法. 要在画布上绘制一个圆, 需要绘制一个弧.

• 要创建任意的形状或弧, 首先需要创建一个路径.

• 路径是一个不可见的线或形状, 它定义了画布上的一条线或区域. 用笔划描出路径或填充路径之前, 路径是看不到.

• 要创建一个三角形, 可以使用 beginPath 创建一个路径. 然后使用 moveTo 和 lineTo 来绘制路径. 使用 closePath 可以连接路径上的两个点.

• 要绘制一个圆, 可以创建一个360°的弧. 起始角为0, 终止角为360°.

• 画布中使用弧度来指定角, 而不是使用度, 所以需要从度转化为弧度来指定起始角和终止角.

• 360度 = 2Pi 弧度.

• 要在画布上绘制文本, 可以使用 fillText 方法.

• 在画布中绘制文本时, 需要使用上下文属性指定位置, 样式和其他属性

• 设置一个上下文属性时, 它会应用到后面的所有绘制操作, 直到你再次改变这个属性. 例如, 改变 fillStyle 会影响设置 fillStyle 之后绘制的所有形状和文本的颜色.

• 可以用 drawImage 方法向画布增加图像.

• 要增加一个图像, 首先需要创建一个图像对象, 并确保它完全加载.

• 在画布上绘制就像在图形程序中完成”位图”绘制.