HTML5 Canvas初体验之绘图基础_H5之家 - 中国HTML5教程资源分享第一站

相信到目前你应该已经对Canvas这一神奇的HTML5新元素有了一定的了解。在本文中，我们将深入了解画布的功能及特点，学习如何在HTML中利用Canvas绘制图形以及其它类型对象。

相信到目前你应该已经对Canvas这一神奇的HTML5新元素有了一定的了解。在本文中，我们将深入了解画布的功能及特点，学习如何在HTML中利用Canvas绘制图形以及其它类型对象。理解如何改变图形形状和对象是如何绘制在画布上，以及如何将其擦除。最后，实例演示如何建立与浏览器窗口的大小相同的画布，以及一些开发游戏必不可缺的技巧等等。

熟悉canvas元素

如同视频和音频元素，canvas元素绝对没有使用外部插件。你唯一需要的只是2D渲染上下文API，即使你不了解2D渲染上下文API也不用担心。

使用canvas元素很简单，我们从下面的代码开始：

<canvaswidth=”500″ height=”500″> <!–Insert fallback content here –> </canvas>

它的作用是创建一个新的空白画布元素，目前还不能够看到什么，因为你没有做任何2D渲染上下文。

创建canvas元素时要特别注意宽度和高度属性，显然这些属性定义canvas元素的大小，进而定义了2D渲染上下文的大小。在没有定义的情况下，将被设置默认的宽度和高度分别为300，150。稍后在本章，我们将着眼于创建一个动态改变大小并填满整个浏览器窗口的画布。

注：canvas元素的位置在你的HTML文档中定义。与其他HTML元素一样，它可以按CSS所需到处移动。

浏览器支持

目前大多数浏览器都支持canvas元素和其大部分功能，但对于Internet Explorer，至少任何早于Internet Explorer 9的版本无法提供支持。一种方式是提醒旧版IE用户升级，另一种选择是使用谷歌开发的一些ExplorerCanvas脚本。这种方法的优点是，你只需要在页面中潜入一个脚本，那么canvas元素在旧版IE中也能正常显示。

ExplorerCanvas脚本可在ExplorerCanvaswebsite下载，并按照说明安装。

2D渲染上下文

canvas元素的目的是充当2D渲染上下文的封装，为您提供所有必要的方法调用以及绘制和操作的功能点。以下这一点非常重要：绘图是在2D渲染上下文中进行，而不是在canvas元素中。你可以通过canvas元素访问并显示2D渲染上下文。

坐标系统

2D渲染上下文是一标准的基于屏幕的绘图平台。与其他2D平台同样，使用同一个平面直角坐标系左上角的原点（0,0）。向右移动会增加x的值，向下移动则增加y值。所以绘图前必须要先了解坐标系统是如何工作的。

2D渲染上下文中直角坐标系

通常一个坐标系统中的单个单元相当于在屏幕上的1个像素，所以位置（24，30）位于向右24像素，向下30像素。也有一些场合坐标系统的单位可能等于2个像素，如高清显示器，不过一般的经验法则是：1坐标单位等于1个屏幕像素。

访问2D渲染系统

不用多说，下面让我们创建一个基本的带空白画布元素的HTML页：

<!DOCTYPE html> <html> <head> <title>Learning thebasics of canvas</title> <metacharset=”utf-8″> <scripttype=”text/javascript” src=” /ajax/libs/jquery/1/jquery.min.js”></script> <scripttype=”text/javascript”> $(document).ready(function() { }); </script> </head> <body> <canvasid=”myCanvas” width=”500″ height=”500″> <!– Insert fallbackcontent here –> </canvas> </body> </html>

如果现在就运行它，将看不到任何东西。在真正开始绘图之前，我们先访问2D渲染上下文。将以下代码写入jQuery声明语句中：

var canvas = $(“#myCanvas”); var context =canvas.get(0).getContext(“2d”);

我们在这里所要做的只是给canvas元素分配一个变量，然后通过调用getContext方法为2D渲染上下文分配另一个变量的。这里需要注意的是，我们使用了jQuery，我们需要调用get方法来获取canvas元素的DOM，这样我们就可以获取canvas的getContext方法。记住一点， get方法与画布本身无关。

现在我们就有了一个包含2D渲染上下文的变量，在声明上下文变量后添加以下代码：

context.fillRect(40, 40, 100, 100);

此时刷新页面，你会发现已经出现了一个黑色的正方形！

图形是黑色的，这是在画布上绘制时的默认颜色。在稍后章节中，我们会学习如何使用默认之外的颜色进行图形绘制。

绘制基本形状与线条

正如你所看到的，绘制一个正方形是非常简单的，它只需一行代码，fillRect()方法如下：

context.fillRect(40, 40, 100, 100);

你会发现所调用的方法为fillRect()而不是fillSquare()。而我们都知道正方形实际是具有相同长度的边的矩形。

创建一个矩形需要四个参数，前两个是矩形起点（左上角）的坐标值（X，Y），最后两个为矩形的宽度和高度。fillRect()方法可以形象化改写成如下形式：

context.fillRect(x, y, width, height);

为清晰起见，改变矩形的宽度值为200，保存该文件并刷新页面。

当然，这是一个矩形。在不同的位置绘制矩形只是改变起点的坐标（x，y）。例如在（200，300）该点处：

在不同位置绘制一个矩形

注意：如果你绘图时原点超出了canvas元素尺寸范围，它将不会出现在屏幕上，而只有原点或者图形的某些部分处于画布元素范围内时才是可见的。