HTML5 Canvas（续）
一、替代内容
在访问页面时，如果浏览器不支持canvas元素，那么就需要提供一份替代代码，来告知访问者出现的问题。
下面这段代码就是实现这一功能：
<canvas>
Update yourbrowser tp enjoy canvas!!
</canvas>
在不支持Canvas的IE8.0中打开，效果如下：
二、检测浏览器支持情况
在创建canvas元素之前可以先对浏览器进行检测，确保浏览器可以支持。这段代码按照书上的代码并不会正确运行，通过查找相关资料，我发现书上的代码其实是不完整的，将代码写成下面的样子就可以正常运行了。
<script type="text/javascript">
window.onload = function ()
{
try {
document.createElement("canvas").getContext("2d");
document.getElementById("support").innerHTML = "你的浏览器支持HTML5。";
}
catch (e) {
document.getElementById("support").innerHTML = "你的浏览器不支持HTML5，赶快升级一下吧！";
}
}
</script>
<body>
<div id="support">
</div>
</body>
分别用Chrome36.0和IE8.0做测试，因为Chrome36.0是支持canvas的，因此它的运行结果应该是显示“你的浏览器支持HTML5。”而IE8.0不支持canvas因此它的运行结果应该是显示“你的浏览器不支持HTML5，赶快升级一下吧！”。效果如下图所示
三、在页面中加入canvas
通过如下的代码可以在页面中建立一块隐藏的区域
<canvas height=”200”width=”200”></canvas>
其中参数height用来指定区域的高度，width用来指定区域的宽度，这个区域是隐藏的，在页面中并不能直接观察到。但是通过给区域加上边框，就可以通过边框查找到区域的位置了。
<canvas id=”diagonal”style=”border: 1px solid;” width=”200 height”200”>
效果如图所示
完成了上面的操作之后就可以在上面“画画”，最简单的画一条直线。代码如下
<canvas id="diagonal" style="border:1px solid black;" width="200" height="200">
</canvas>
<script type="text/javascript">
window.onload =function ()
{
var canvas =document.getElementById("diagonal");
var context =canvas.getContext("2d");
context.beginPath();
context.moveTo(70, 140);
context.lineTo(140, 70);
context.stroke();
}
</script>
其中var canvas = document.getElementById("diagonal");通过canvasID获取canvas对象的访问权限。
var context = canvas.getContext("2d");使用canvas对象的getContext方法传入希望使用的canvas类型。
下面的几行就是画图的基本操作：
beginPath():不论开始绘制何种图形，第一个需要调用的就是beginPath。这个简单的函数不带任何参数，它用来通知canvas将要开始绘制一个新的图形了。
moveTo(x,y):不绘制，将当前位置移动到新的目标坐标(x,y)。
lineTo(x,y):不仅将当前位置移动到新的目标坐标(x,y)，而且在两个坐标之间画一条直线，实际上moveTo和lineTo只是传入了这条直线的起始点，并没有真正划线，而是在结束canvas操作时，通过调用context.stroke()方法完成线条的绘制。效果如下图所示：
8921
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
