4.1　使用canvas

视频讲解

在HTML5文档中，使用<canvas>标签可以在网页中创建一块画布，用法如下所示：

    <canvas id="myCanvas" width="200" height="100"></canvas>

该标签包含三个属性：

　id：用来标识画布，以方便JavaScript脚本对其引用。

　width：设置canvas的宽度。

　height：设置canvas的高度。

在默认情况下，canvas创建的画布大小为宽300像素、高150像素，可以使用width和height属性自定义其宽度和高度。

注意，与<img>不同，<canvas>需要结束标签</canvas>。如果结束标签不存在，则文档的其余部分会被认为是替代内容，将不会显示出来。

【示例1】可以使用CSS控制canvas的外观。例如，在下面示例中使用style属性为canvas元素添加一个实心的边框，在浏览器中的预览效果如图4.1所示。

    <canvas id="myCanvas" style="border:1px solid;" width="200" height="100"></canvas>

使用JavaScript可以在canvas画布内绘画，或设计动画。具体步骤如下：

【操作步骤】

第1步，在HTML5页面中添加<canvas>标签，设置canvas的id属性值以便JavaScript调用。

    <canvas id="myCanvas" width="200" height="100"></canvas>

第2步，在JavaScript脚本中使用document.getElementById()方法，根据canvas元素的id获取对canvas的引用。

    var c=document.getElementById("myCanvas");

第3步，通过canvas元素的getContext()方法获取画布上下文（context），创建context对象，以获取允许进行绘制的2D环境。

    var context=c.getContext("2d");

getContext("2d")方法返回一个画布渲染上下文对象，使用该对象可以在canvas元素中绘制图形，参数“2d”表示二维绘图。

第4步，使用JavaScript进行绘制。例如，使用以下代码可以绘制一个位于画布中央的矩形。

    context.fillStyle="#FF00FF";
    context.fillRect(50,25,100,50);

这两行代码中，fillStyle属性定义将要绘制的矩形的填充颜色为粉红色，fillRect()方法指定了要绘制的矩形的位置和尺寸。图形的位置由前面的canvas坐标值决定，尺寸由后面的宽度和高度值决定。在本例中，坐标值为（50,25），尺寸为宽100像素、高50像素，根据这些数值，粉红色矩形将出现在画面的中央。

【示例2】下面给出完整的示例代码。

以上代码在浏览器中的预览效果如图4.2所示。在画布周围加了边框是为了更能清楚地看到中间矩形位于画布的什么位置。

图4.1　为canvas元素添加实心边框

图4.2　使用canvas绘制图形

fillRect(50,25,100,50)方法用来绘制矩形图形，它的前两个参数用于指定绘制图形的x轴和y轴坐标，后面两个参数设置绘制矩形的宽度和高度。

在canvas中，坐标原点（0,0）位于canvas画布的左上角，x轴水平向右延伸，y轴垂直向下延伸，所有元素的位置都相对于原点进行定位，如图4.3所示。

图4.3　canvas默认坐标点

目前，IE 9+、Firefox、Opera、Chrome和Safari版本浏览器均支持canvas元素及其属性和方法。

老版本浏览器可能不支持canvas元素，因此在特定用户群中，需要为这些浏览器提供替代内容。只需要在<canvas>标签内嵌入替代内容，不支持canvas的浏览器会忽略canvas元素，而显示替代内容；支持canvas的浏览器则会正常渲染canvas，而忽略替代内容。例如：