相信大家都对这个“Firefox展示强大3D渲染能力”很感兴趣吧？！那么您应该就有兴趣知道这个是如何实现的，是否我们也能够做出如此出色的画面来呢？！
相信大家都对这个“
target=_blank hreflang=zh>Firefox展示强大3D渲染能力”很感兴趣吧？！那么您应该就有兴趣知道这个是如何实现的，是否我们也能够做出如此出色的画面来呢？！
yes，just do it!
实际上，这个所谓“
target=_blank hreflang=zh>Firefox展示强大3D渲染能力”的根基就是FireFox1.5带来的一个新的图像HTML元素：
target=_blank><canvas>，所以的3D画面都是利用<canvas>的API方法完成的。从今天开始，本站将以一系列文章来详细介绍这个<canvas>元素。
<canvas>是一个新的可以通过脚本（通常是JavaScript)绘制图像的HTML元素，例如，它可以用来绘制图表、制作简单（或复杂）的动画。右边是一些使用的<canvas>创建的图像的效果图，我们将在后续的文章中看到它们的实现方法。
hreflang=zh>苹果公司为了其的
hreflang=zh>Mac OS X Dashboard第一次将<canvas>带入到我们眼前，随后苹果公司有将其自主开发的浏览器
hreflang=zh>Safari中实现了<canvas>。Mozilla的基于
hreflang=en>Gecko 1.8图像引擎的浏览器，如Firefox 1.5都支持这个元素。而<canvas>元素是
hreflang=en>WhatWG Web applications 1.0即HTML 5规范的一部分。
开始之前
使用<canvas>元素不是很难，但是您需要对
hreflang=en>HTML和
target=_blank hreflang=en>JavaScript有个基本的了解。
另外，正如前面我们提到的，大部分主流的浏览器都不支持<canvas>元素，所以您需要使用Firefox 1.5、其他基于Gecko引擎的浏览器或者最新版本的Safari浏览器才能够查看示例。
章节划分
在本系列介绍中我们将会分以下几部分：
target=blank>基本用法(Basic usage)
target=blank>绘制基本图形(Drawing shapes)
target=blank>使用图像(Using images)
今天我们首先来看看<canvas>的基本用法：
<canvas>元素
让我们从<canvas>元素本身开始我们的介绍。
<canvas id=”tutorial” width=”150″ height=”150″></canvas>
fallback内容（Fallback content）
例如，我们可以提供关于canvas内容的一个文本描述或者为动态显示的内容提供一张静态的图像，可能的代码如下：
<canvas id=”stockGraph” width=”150″ height=”150″>注意：苹果对<canvas>的实现与规范有些不同，它不认识</canvas>关闭标签。所以在Safari中，所以的fallback内容都将会显示，不过可以通过CSS或者教本来隐藏它。current stock price: $3.15 +0.15
</canvas>
<canvas id=”clock” width=”150″ height=”150″>
<img src=”images/clock.png” width=”150″ height=”150″/>
</canvas>
getContext
如果您创建一个HTML页面并用Firefox打开它，您将看到canvas元素的区域是一片空白，所以我们就需要使用某种方法来或者<canvas>元素实例，这就是我们将要介绍的getContext方法。为了使用绘图函数，每个canvas元素都有一个名称为getContext的DOM方法，getContext只能有一个指明绘图上下文类别（drawing
context）参数,当前只有一个context:2d context。以后可能支持3d context但是目前限制为2d context。
var canvas = document.getElementById(’canvas’);
var ctx = canvas.getContext(’2d’);
在第1行，我们使用
target=_blank hreflang=en>getElementById方法获取canvas DOM
节点，然后我们就可以使用getContext方法访问drawing context了。
在不支持的浏览器中停止执行
var canvas = document.getElementById(’canvas’);
if (canvas.getContext){var ctx = canvas.getContext(’2d’);
// drawing code here}
所有的绘图代码都应该放置在if语句里面，所以当浏览器不支持<canvas>时，它将不运行它。
将它们合在一起
现在，我们将所有的代码放置在一个类似下面的简单HTML模板里面，我将用它作为后续介绍的示例的模板。
hreflang=en>下载模板文件
<html><head>
<title>Canvas tutorial</title>
<script type=”text/javascript”>
function draw(){
var canvas = document.getElementById(’tutorial’);
if (canvas.getContext){
var ctx = canvas.getContext(’2d’);
}
}
</script><style type=”text/css”>
canvas { border: 1px solid black; }
</style>
</head>
<body onload=”draw();”>
<canvas id=”tutorial” width=”150″ height=”150″></canvas></body>
</html>
以上是本系列介绍的基础，在后续的介绍里，我们最终做会某些实际的绘图。
原文：
target=_blank hreflang=en>Canvas tutorial:Basic usage
1月 4th, 2009
O comments at "Firefox 1.5发现之旅:火狐图像创作基础介绍1 - 基本用法"
Comment Now!