HTML5Canvas属性、定义及方法[参考].pdfVIP

摘自《 HTML5 高级程序设计》《 HTML5 揭秘》 一 、 简 单 图 形 ， 整 套 的 属 性 和 方 法 专 门 用 于 绘 制 矩 形 ： 1 、 fillStyle 可 以 设 置 为 CSS 颜 色 、 一 个 图 案 或 一 种 颜 色 渐 变 。 fillStyle 默 认 是 纯 黑 色 ， 你 可 以 设 置 成 你 喜 欢 的 任 意 颜 色 。只 要 页 面 打 开 着 ，每 个 绘 图 上 下 文 都 会 记 录 自 己 的 属 性 ，除 非 你 重 置 过 它 。 2 、 fillRect(x,y,width,height) 绘 制 一 个 矩 形 ， 并 以 当 前 的 fillStyle 来 填 充 。 3 、 srtokeStyle 和 fillStyle 一 样 ， 可 以 设 置 为 CSS 颜 色 、 一 个 图 案 或 一 种 颜 色 渐 变 。 4 、 strokeRect （x,y,width,height ） 使 用 当 前 的 storke style 来 绘 制 一 个 矩 形 ， strokeRect 并 不 填 充 中 间 区 域 ， 而 只 绘 制 矩 形 的 边 缘 。 5 、 clearRect(x,y,width,height) 清 除 指 定 矩 形 区 域 的 像 素 。 二 、 路 径 按 照 惯 例 ，不 论 开 始 绘 制 何 种 图 形 ，第 一 个 需 要 调 用 的 就 是 beginPath 。这 个 简 单 的 函 数 不 带 任 何 参 数 ， 它 用 来 通 知 canvas 将 要 开 始 绘 制 一 个 新 的 图 形 了 。 对 于 canvas 来 说 ， beginPath 函 数 最 大 的 用 处 是 canvas 需 要 据 此 来 计 算 图 形 的 内 部 和 外 部 的 范 围 ， 以 便 完 成 后 续 的 描 边 和 填 充 。 路 径 会 跟 踪 当 前 坐 标 ， 默 认 值 是 原 点 。 canvas 本 身 也 跟 踪 当 前 坐 标 ， 不 过 可 能 通 过 绘 制 代 码 来 修 改 。 每 一 个 canvas 都 有 一 个 路 径 ， 定 义 路 径 就 如 同 用 铅 笔 作 画 。 你 可 以 任 意 作 地 画 ， 但 它 不 一 定 是 最 终 作 品 的 一 部 分 ， 直 到 你 拿 起 画 笔 沾 上 墨 水 描 绘 这 条 路 径 。 moveTo(x,y) ： 不 绘 制 ， 只 是 将 当 前 位 置 移 动 到 新 目 标 坐 标 （x,y ） ， 并 作 为 线 条 开 始 点 。 lineTo(x,y) ：绘 制 线 条 到 指 定 的 目 标 坐 标 (x,y) ，并 且 在 两 个 坐 标 之 间 画 一 条 直 线 。不 管 调 用 它 们 哪 一 个 ， 都 不 会 真 正 画 出 图 形 ， 因 为 我 们 还 没 有 主 ， 调 用 stroke （绘 制 ） 和 fil （填 充 ） 函 数 。 当 前 ， 只 是 在 定 义 路 径 的 位 置 ， 以 便 后 面 绘 制 时 使 用 。 closePath() ， 这 个 函 数 跟 lineTo 很 像 ， 唯 一 的 差 别 在 于 closePath 会 将 路 径 的 起 始 坐 标 自 动 作 为 目标 坐 标 。 closePath 还 会 通 知 canvas 当 前 绘 制 的 图 形 已 经 闭 合 或 者 形 成 了 完 全 封 闭 的 区 域 。 起 连 接 起 点 ， 闭 合 路 径 的 作 用 。 三 、 文 本 操 作 canvas 文 本 的 方 式 与 操 作 其 他 路 径 对 象 的 方 式 相 同 ：可 以 描 绘 文 本 轮 廓 和 填 充 文 本 内 部 ， 同 时 ， 所 有 能 够 应 用 于 其 他 图 形 的 变 换 和 样 式 都 能 用 于 文 本 。 context 对 象 的 文 本 绘 制 功 能 由 两 个 函 数 组 成 ： fillText(text,x,y,maxwidth) trokeText(text,x,y,maxwidth) 两 个 的 参 数