HTML5学习笔记（1）——canvas绘图

　　从今天起开始正式学习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做出各种惊人的效果，不怕做不到，只要你想得到。

　　效果演示地址：http://xiaowu.shnow.cn/html5/note1/canvas.html