canvas入门详解

html5是新兴的网页技术标准

目前，除IE8及其以下版本的IE浏览器之外，几乎所有主流浏览器(FireFox、Chrome、Opera、Safari、IE9+)都已经开始支持html5了。

众所周知，html5中增加了许多新特性。在html5的众多特性中，Canvas应该算是最引人注目的新特性之一。我们使用html5的Canvas对象可以直接在浏览器的网页上绘制图形。这意味着浏览器可以脱离Flash等第三方插件，直接在网页上显示图形或动画。

现在，我们就来为html5初学者介绍如何使用html5 Canvas绘制基本的图形。

首先，我们需要准备如下html基础代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas入门示例</title>
</head>
<body>

</body>
</html>

上述代码是一个html5页面的基本代码模板。

其中，第一行代码<!DOCTYPE html>是一个文档类型标签指令，这也是html5页面的标准文档类型指令，用于告诉浏览器「这是一个html5页面，请按照html5的网页标准来解析显示该页面」。

第4行代码<meta charset="UTF-8">用于告诉浏览器「这个html5页面的字符编码为UTF-8」，这也是html5网页设置字符编码的标准写法。这与以往的html字符编码指令有所不同。

<!-- 以往的html字符编码指令如下 -->
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

现在，我们就在包含上述代码的html文件中进行Canvas绘制图形的实例讲解。首先，我们在上述html代码的body部分添加如下canvas标签。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas入门示例</title>
</head>
<body>
<!-- 添加canvas标签，并加上红色边框以便于在页面上查看效果 -->
<canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">
您的浏览器不支持canvas标签。
</canvas>
</body>
</html>

此时，我们使用支持html5的浏览器打开该页面，将会看到如下内容：

canvas标签显示效果

在html5中，canvas标签本身并没有任何行为，仅仅只是在页面上占用指定大小的页面空白空间。canvas标签就相当于一块空白的画布，还需要我们自己使用JavaScript提供的canvas API编写相应的代码从而在这块画布上绘制出我们想要的图形。

备注：canvas标签体内的文字内容将会在不支持html5的浏览器中显示。如上
述html代码所示，如果你的浏览器不支持html5的canvas标签，那么将会在canvas标签处显示
文字「您的浏览器不支持canvas标签」。

作为「画家」的我们，首先需要熟悉我们手中的画笔，也就是JavaScript中的Canvas对象及其相关内容。

在html5中，一个canvas标签就对应一个Canvas对象，我们在JavaScript可以使用document.getElementById()等常规函数来获取该对象。值得注意的是，在JavaScript中，我们并不是直接操作Canvas对象，而是通过Canvas对象来获取对应的图形绘制上下文对象CanvasRenderingContext2D，然后我们再利用CanvasRenderingContext2D对象自带的许多绘制图形的函数来绘图。

这就好像是每一张画布都对应一支画笔，要想在画布上绘画，我们就先要拿到对应的画笔，然后使用这支画笔在画布上绘图。CanvasRenderingContext2D对象就相当于这支画笔。现在，我们就先来尝试在JavaScript中拿到这支画笔。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas绘制线条入门示例</title>
</head>
<body>
<!-- 添加canvas标签，并加上红色边框以便于在页面上查看效果 -->
<canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">
您的浏览器不支持canvas标签。
</canvas>
<script type="text/javascript">
//获取Canvas对象(画布)
var canvas = document.getElementById("myCanvas");
//简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误
if(canvas.getContext){
    //获取对应的CanvasRenderingContext2D对象(画笔)
    var ctx = canvas.getContext("2d");
}
</script>
</body>
</html>

如上述代码所示，我们可以使用Canvas对象的getContext()方法来获取CanvasRenderingContext2D对象。比较细心的读者应该注意到了：getContext()方法需要传入一个字符串——2d，获取到的CanvasRenderingContext2D对象的名称中也带有2D。这是因为，目前html5只支持2D绘图，但是在未来的html5中也可能支持3D或其他形式的绘图。届时，我们可能就需要使用getContext("3d")来获取CanvasRenderingContext3D对象并绘制3D图形了。

注意点：【①Math.PI是JavaScript中表示π的常量，Math.PI /2为90°，Math.PI*2为360°】

猜你喜欢