canvas教程.docVIP

Canvas 教学  HYPERLINK /en/HTML/Canvas \o en/HTML/Canvas canvas 是新的  HYPERLINK /zh_tw/HTML \o zh tw/HTML HTML 元素，可透过 Script（通常是  HYPERLINK /zh_tw/JavaScript \o zh tw/JavaScript JavaScript）绘制图形。可用于画图、组合图像，或做简单的动画（也可以 HYPERLINK /en/A_Basic_RayCaster \o en/A_Basic_RayCaster 不怎么简单）。右侧图像是 canvas 的使用范例，稍后可在本教学看到做法。 canvas 最先由苹果的  HYPERLINK /macosx/features/dashboard/ \o /macosx/features/dashboard/ \t _blank Mac OS X Dashboard 所引入，稍后实作于 Safari。使用  HYPERLINK /zh_tw/Gecko \o zh tw/Gecko Gecko 1.8 的浏览器，如 Firefox 1.5，也支持了这个新元素。canvas 元素是  HYPERLINK /specs/web-apps/current-work/ \o /specs/web-apps/current-work/ \t _blank WhatWG Web applications 1.0 （又称为 HTML 5）规范的一部分。 在本教学中，我将解说如何在自己的 HTML 页面中使用 canvas 元素。提供的范例将使你的观念更清晰，使你了解能够用 canvas 做什么，并能够自行开始应用。 在开始之前 使用 canvas 元素并不难，但需要  HYPERLINK /zh_tw/HTML \o zh tw/HTML HTML 和  HYPERLINK /zh_tw/JavaScript \o zh tw/JavaScript JavaScript 的基础。 如上所述，并不是所有浏览器都支持 canvas 元素，所以你需要 Firefox 1.5，或使用 Gecko 的浏览器、Opera 9，或新版 Safari，才能看见所有的范例。 目录 基本用法 绘制图形 使用影像 套用样式和色彩 变形 合成 基本的动画 基本用法 canvas 元素 让我们从 canvas 元素本身开始教学。 canvas id=tutorial width=150 height=150/canvas 这看起来很像 img 元素，唯一的不同点是它没有 src 和 alt 属性 (attribute)。canvas 元素只??两个属性︰width 和 height。这两者非必须，也可以使用 DOM 属性 (propertie) 设定。如果不指定宽和高，canvas 就会使用 300 像素宽和 150 像素高。也可以使用  HYPERLINK /zh_tw/CSS \o zh tw/CSS CSS 重设大小，但只会把影像直接缩放以适应布局。（如果你的成像看起来有点扭曲，试着在 canvas 属性中明确地指定宽高，不要使用 CSS） id 属性并非 canvas 元素所独有，就像标准的 HTLM 标签一样，任何一个 HTML 元素都可以指定 id 值（如同 class 一般）。为元素指定 id 是非常好的观念，因为这样才能在 Script 中轻松识别。 canvas 元素可以像普通影像一般套用样式（边距、边框、背景等）。这些样式不会影响到 canvas 的绘制内容。稍后我们会看到如何套用样式。若不指定样式，canvas 默认是全透明。 备用内容 因为 canvas 元素相对较新，部分浏览器并未支持（如 Firefox 1.0 和 Internet Explorer），如果浏览器不支持 canvas 元素，便需要提供备用的内容。 这很简单︰我们只须提供替代品代替 canvas 元素。如果浏览器不支持 canvas，便会忽略 canvas 元素，直接显示标记内的备用内容，就和显示 canvas 一样。 例如，我们可提供 canvas 的文字述叙，或提供动态成像内容的静态影像。就像这样︰ canvas id=stockGraph width=150 height=150 current stock price: $3.15 +0.15 /canvas canvas id=clock width=150 height=150 img src=images/clock.png width=150 height=150 alt=/