从今天起开始正式学习HTML5，HTML5和我们目前主流的HTML4相比具有更强的Web 网页的表现性能，其中的canvas属性的绘图圆角渐变功能使得网页的表现形式更加丰富多彩，另外HTML5的本地数据库等 Web 应用的功能使得WEB应用功能更加强大，正因为如此，HTML5被称作下一代的互联网的标准。
好了，废话不多说，开始我们的HTML5之旅，今天开始学习的canvas。
canvas属性是为了客户端绘制矢量图而设计，它没有自己的行为，简单的来说canvas自己并不能完成独立的绘图操作，它需借助Javascript来完成相关的绘图操作。
那么在页面中，我们怎么添加canvas元素，方法很简单，用如下方式即可。
<!--为了便于后面的操作，我们给canvas元素添加了一个ID，宽度和高度-->
<canvas id="a" width="500" height="375">对不起，您的浏览器不支持canvas</canvas>
canvas和大部分的成对标记一样，是成对的。为了便于后面的Javascript操作canvas进行绘图，我们在canvas标签中添加了一个ID，同时我们还设定了宽度和高度。<canvas></canvas>中间的内容有什么用呢？在支持canvas的浏览器中<canvas></canvas>中间的内容我们是看不到，而在不支持canvas的浏览器中，我们只能看到<canvas></canvas>之间的内容，canvas结合javascript所作的其他操作都将被忽略。
例如，以上代码在IE8中运行结果如下图所示：（注：IE8不支持HTML5）
那么刚刚我说了，canvas它没有自己的行为，需要结合Javascript才能发挥它强大的功效。因此，以上代码即便在支持canvas的浏览器（如chrome）中也是看不到任何内容.的。所以，要发挥canvas的强大功能，我们还必须借助于Javascript这个强有力的工具。
在canvas和Javascript强强联合之前，我们先来了解一下canvas在Javascript中的几个函数和属性。
1. moveTo (x, y) 把画笔移动到指定点并作为线条的开始，简单的来说，就是我们要画线的起始点的坐标位置。
2. lineTo(x,y) 绘制线条到指定的结束点，也就是说，我们的直线要画到坐标（x,y）处结束。
3. strokeStyle 我们可以通过canvas的这个属性来设定要绘制直线的样式，例如 canvas.strokeStyle="#aaa"来会绘制淡灰色的直线。
4. strokeStyle() 这个函数是开始绘制函数。当我们调用了moveTo (),lineTo()函数之后，直线并不会立马显示在浏览器区域，而需要通过strokeStyle()显示出来，你可以这样理解，moveTo(),lineTo()函数只是把直线画在了内存中，strokeStyle()函数才真正帮助我们把内容显示在了浏览器中。
例如，我们可以通过一下javascript代码绘制一个淡灰色的坐标网格。
<script type="text/javascript">
var a_canvas = document.getElementById("a"); //获取canva元素节点
var context = a_canvas.getContext("2d"); //初始化canvas节点，参数设为2d
//通过循环，画出水平直线
for(var x=0.5; x<500; x+=20)
{
context.moveTo(x,0);
context.lineTo(x,375);
}
//通过循环，画出竖直直线
for(var y=0.5; y<375; y+=20)
{
context.moveTo(0,y);
context.lineTo(500,y);
}
context.beginPath(); //下面绘制的直线样式不一样，所以我们要用beginPath清除上面的样式
// 绘制水平X轴坐标
context.moveTo(0,40);
context.lineTo(240,40);
context.moveTo(260,40);
context.lineTo(500,40);
context.moveTo(495,35);
context.lineTo(500,40);
context.moveTo(495,45);
context.lineTo(500,40);
//绘制竖直Y轴坐标
context.moveTo(60,0);
context.lineTo(60,153);
context.moveTo(60,173);
context.lineTo(60,375);
context.moveTo(65,370);
context.lineTo(60,375);
context.moveTo(55,370);
context.lineTo(60,375);
context.strokeStyle="#f00";
context.stroke();
</script>
在chrome中运行的结果如下：
接下来要讲的是文本的绘制，在讲文本的绘制之前，我们先要了解函数canvas在Javascript中关于文本绘制操作的两个属性和一个函数。
1. font 我们可以通过font属性来设置要绘制文本的样式大小字体等内容，如canvas.font="blod,12px,sans-serif",那么我们绘制出来的文本将以粗体，12px大小，sans-serif显示。
2. fontStyle 我们可以通过fontStyle属性来设置要绘制文本的其他样式，如canvas.fontStyle="green";那么我们绘制出来的字体讲呈绿色。
3. fillText("string",x,y) 我们可以通过fillText来绘制文本，string为要绘制的文本信息，x,y为要绘制位置信息。
例如，我们在以上Javascript代码中添加以下代码。
//绘制文字"x","y","hello SkyWorld", "Just do what you want"
context.font="bold 18px sans-serif";
context.fillText("x",245,44);
context.fillText("y",56,164);
context.fillStyle="green";
context.font="bold 30px Bradley Hand ITC";
context.fillText("Hello SkyWorld",100,180);
context.fillText("Just do what you want",140,240);
那么我们看到的效果是:
那么至此canvas的基本用法已经给大家演示完毕，相信大家对HTML5中的canvas已经有了初步的认识，但是canvas的用法远远不止这些，你可以用canvas结合Javascript做出各种惊人的效果，不怕做不到，只要你想得到。