7.1 canvas概述
Canvas是一个新的HTML元素，可以被Script语言（通常是JavaScript）用来绘制图形。
7.1.1 添加canvas元素
<canvas>标记是一个矩形区域，包含两个属性width和height，分别表示矩形区域的宽度和高度。这两个属性都是可选的，并且都可以通过CSS来定义，其默认值是300像素和150像素。
Canvas在网页中常用的形式如下：
<canvas id="myCanvas" width="300" height="200" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas>
上面示例代码中，id表示画布对象名称；width和height分别表示宽度和高度。最初的画布是不可见的，此处为了观察该矩形区域，使用了CSS样式，即<style>标记，Style表示画布的样式。如果浏览器不支持画布标记，就会显示画布中间的提示信息。
画布canvas本身不具有绘制图形的功能，只是一个容器。如果读者对于Java语言有所了解，就会发现HTML5的画布和Java中的Panel面板非常相似，都可以在容器绘制图形。既然canvas画布元素放好了，就可以使用脚本语言JavaScript在网页上绘制图形了。
使用canvas结合JavaScript绘制图形，一般需要下面几个步骤。
01 JavaScript使用id来寻找canvas元素，即获取当前画布对象。
var c=document.getElementById("myCanvas");
02 创建context对象。
var cxt=c.getContext("2d");
getContext函数返回一个指定contextId的上下文对象，如果指定的id不被支持，则返回null，当前唯一被强制必须支持的是2D（也许在将来会有3D）。注意，指定的id对大小写是非常敏感的。对象cxt建立之后，就可以拥有多种绘制路径、矩形、圆形、字符及添加图像的方法。
03 绘制图形。
cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75);
fillStyle函数将其染成红色。fillRect函数规定了形状、位置和尺寸，这两行代码绘制一个红色的矩形。
7.1.2 绘制矩形
单独的<canvas>标记只是在页面中定义了一个矩形区域，并无特别之处，开发人员只有配合使用JavaScript脚本，才能完成各种图形、线条及复杂图形的变换操作。与基于SVG来实现同样绘图效果进行比较，canvas绘图是一种像素级别的位图绘图技术，SVG则是一种矢量绘图技术。
使用canvas和JavaScript绘制一个矩形，可能会涉及一个或多个函数，这些函数如表7-1所示。
表7-1 绘制函数
【例7.1】（实例文件：ch07\7.1.html）
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="200" style="border:1px solid
blue">Your browser does not support the canvas element</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="rgb(0,0,200)";
cxt.fillRect(10,20,100,100);
</script>
</body>
</html>
在上面的代码中，首先定义了一个画布对象，其id名称为myCanvas，高度和宽度分别为200像素和300像素，并定义了画布的边框显示样式。在JavaScript代码中，首先获取画布对象，然后使用getContext获取当前2d的上下文对象，并使用fillRect绘制一个矩形。其中涉及一个fillStyle属性，用于设置填充的颜色、透明度等，如果设置为“rgb(200,0,0)”，则表示一个颜色，不透明；如果设为“rgba(0,0,200,0.5)”，则表示一个颜色，透明度为50%。
在IE 11.0中浏览效果如图7-1所示，可以看到网页中，在一个蓝色边框中显示了一个蓝色矩形。
图7-1 绘制矩形