1.2 Canvas元素
HTML5 Canvas，简单来说，就是一门使用JavaScript来操作Canvas元素的技术。使用Canvas元素来绘制图形，需要以下3步。
① 获取canvas对象。
② 获取上下文环境对象context。
③ 开始绘制图形。
举例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
window.onload = function () {
//1、获取canvas对象
var cnv = document.getElementById("canvas");
//2、获取上下文环境对象context
var cxt = cnv.getContext("2d");
//3、开始绘制图形
cxt.moveTo(50, 100);
cxt.lineTo(150, 50);
cxt.stroke();
}
</script>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
预览效果如图1-7所示。
图1-7 画直线
分析
在Canvas中，我们使用document.getElementById()方法来获取Canvas对象（这是一个DOM对象），然后使用Canvas对象的getContext("2d")方法获取上下文环境对象context，最后使用context对象的属性和方法来绘制各种图形。
1.2.1 Canvas元素简介
Canvas是一个行内块元素（即inline-block），我们一般需要指定其3个属性：id、width和height。width和height分别用于定义Canvas元素的宽度和高度。默认情况下，Canvas元素的宽度为300px（Pixel，像素），高度为150px。
对于Canvas的宽度和高度，我们有两种方法来定义：一是在HTML属性中定义，二是在CSS样式中定义。但是在实际开发中，我们一定不要在CSS样式中定义，而应该在HTML属性中定义。为什么呢？我们先来看一个例子。
举例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
canvas
{
width:200px;
height:150px;
}
</style>
<script type="text/javascript">
window.onload = function () {
var cnv = document.getElementById("canvas");
var str = "canvas的宽度为：" + cnv.width + "，高度为：" + cnv.height;
alert(str);
}
</script>
</head>
<body>
<canvas id="canvas" style="border:1px dashed gray;"></canvas>
</body>
</html>
预览效果如图1-8所示。
图1-8 无法获取正确的宽度和高度
分析
从这个例子我们可以看出：如果在CSS样式中定义，Canvas元素的宽度和高度是默认值，而不是所定义的宽度和高度，这样我们就无法获取Canvas元素正确的宽度和高度。获取Canvas元素实际的宽度和高度是Canvas开发中最常用的操作，因此对于Canvas元素的宽度和高度，我们一定要在HTML属性中定义，而不是在CSS样式中定义。
1.2.2 Canvas对象
在Canvas中，我们使用document.getElementById()来获取Canvas对象。Canvas对象常用的属性和方法如表1-1和表1-2所示。
表1-1 Canvas对象的常用属性
表1-2 Canvas对象的常用方法
也就是说，我们可以使用cnv.width和cnv.height分别获取Canvas对象的宽度和高度，可以使用cnv.getContext("2d")来获取Canvas 2D上下文环境对象，也可以使用toDataURL()来获取Canvas对象产生的位图的字符串。在这里，cnv指的是Canvas对象。
对于toDataURL()方法，小伙伴们暂时不需要深入了解，在后面的章节中会给大家详细介绍。这里我们要认真学习getContext("2d")方法。在Canvas中，我们使用getContext("2d")来获取Canvas 2D上下文环境对象，这个对象又被称为context对象。后面章节接触的所有图形的绘制，使用的都是context对象的属性和方法，我们要特别清楚这一点。当然，现在不理解没关系，学到后面再回过头来看看这段话就懂了。
举例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
window.onload = function () {
var cnv = document.getElementById("canvas");
var str = "Canvas的宽度为：" + cnv.width + "，高度为：" + cnv.height;
alert(str);
}
</script>
</head>
<body>
<canvas id="canvas" width="200" height="160" style="border:1px dashed gray"></canvas>
</body>
</html>
预览效果如图1-9所示。
图1-9 获取正确的宽度和高度
特别要注意一点：在本书中所有图形的绘制，使用的都是context对象（上下文环境对象）的属性和方法。
【解惑】
1．我们可以使用getContext("2d")来实现2D绘图，那是不是意味着可以使用getContext ("3d")来实现3D绘图呢？
HTML5 Canvas暂时只提供2D绘图API,3D绘图可以使用HTML5中的WebGL实现。不过3D绘图一直以来都是HTML5中的“黑科技”，技术要求高并且难度大。等学完了这本书，有兴趣的小伙伴可以关注绿叶学习网的WebGL教程。
2．对于IE浏览器来说，暂时只有IE9以上版本支持HTML5 Canvas，那怎么处理IE7和IE8的兼容性问题呢？
对于IE7和IE8，我们可以借助“explorercanvas”这个扩展来解决。该扩展下载地址为：https://github.com/arv/explorercanvas。
我们只需要在页面中像引入外部JavaScript文件那样引入“excanvas.js”就可以了，代码如下。
<!--[if IE]>
<script src="excanvas.js"></script>
<![end if]-->
不过要跟大家说明一下，低版本的IE浏览器即使引入了“excanvas.js”来使用Canvas，在功能上也会有很多限制，如无法使用fillText()方法等。
3．除了这本书，还有哪些值得推荐的Canvas教程？
建议小伙伴们多看看W3C官方网站的Canvas开发文档，因为这是比较权威的参考资料。W3C官网地址：www.w3.org/TR/2dcontext/。