HTML5边玩边学（1）：画布

　　一、<canvas>标签

　　Html5 引入了一个新的<canvas> 标签，这个标签所代表的区域就好象一块画布，你的所有图形绘制最后都要在这块画布上呈现。有了这个标签，浏览器的图形表现力被极大的提升，Flash 和 SilverLight 有没有感到威胁呢?

　　<canvas>标签的用法非常简单，如下：

   
    
    <
    canvas 
    id
    ="tutorial"
    width
    ="150"
     height
    ="150"
     style
    ="background-color:red;"
    >
    
你的浏览器不支持 Canvas 标签

    </
    canvas
    >
   

　　<canvas>标签和普通的 HTML 标签没有多大的区别，你可以设置它的宽度和高度，可以通过 CSS 设置它的背景色、边框样式等等。你可以在这里找到关于<canvas> 标签的更多内容。

　　标签中间的内容是替换内容，如果用户的浏览器不支持<canvas> 标签，这段内容就会被显示出来；如果用户的浏览器支持<canvas> 标签，则这段内容将被忽略。

　　上面的 <canvas> 代码显示效果如下：

你的浏览器不支持 Canvas 标签

　　如果你用的是IE浏览器，可能只能看到一个提示；如果你用的是谷歌浏览器或者火狐浏览器，你就可以看到一个红色的方块区域。

　　二、渲染上下文 Rendering Context

　　其实光有 <canvas> 标签我们并不能作任何事情，玩过 Windows 编程的同学都知道，在 Windows 里面绘图先要得到一个设备上下文 DC ,在 <canvas> 标签上绘图也需要先得到一个渲染上下文，我们的图形并不是直接画到屏幕上的，而是先画到上下文(Context)上，然后再刷新到屏幕上面的。

　　题外话： 为什么要整出一个“上下文”这么复杂的概念呢？因为有了上下文对象，我们就可以让各种不同的图形设备在我们眼里面看起都是一个样，我们只需要专注于绘图，其他的工作就让操作系统和浏览器去操心吧，说白了就是把各式各样的具体变成统一的抽象，从而减轻我们的负担。

　　获取上下文非常简单，只需要如下两行代码：

     
      
      var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
     

　　首先获取 canvas 对象，然后调用 canvas 对象的 getContext 方法，这个方法目前只能传入参数 “2d”，不久的将来他可能会支持参数 “3d”，你一定明白那意味着什么，让我们期待吧。

　　getContext 方法返回一个 CanvasRenderingContext2D 对象 ，即渲染上下文对象，你可以在 这里 找到关于它的更多内容，都是一些绘图方法。

　　三、浏览器支持

 　　除了在那些不支持的浏览器上显示替用内容之外，我们还可以通过脚本的方式来检查浏览器是否支持 canvas ，方法很简单，判断 getContext 函数是否存在即可，代码如下：

    
     
     var canvas = document.getElementById('tutorial'); 
if (canvas.getContext){ 
 alert("支持 
     <
     canvas
     >
      标签"); 
} else { 
 alert("不支持 
     <
     canvas
     >
      标签"); 
}

    

　　四、一个小例子

　　下面将用 HTML5 的绘图功能演示一个上下移动的线条的例子， 具体的代码将在后续内容中给出。

   
    
    <
    p
    >
    
你的浏览器不支持 
    &lt;
    canvas
    &gt;
    标签，请使用 Chrome 浏览器 或者 FireFox 浏览器
    </
    p
    >
    

    <
    script 
    type
    ="text/javascript"
    >
    //
     <![CDATA[
    

     
    var
     canvas 
    =
     document.getElementById(
    '
    move_line
    '
    );
 
    var
     ctx
    =
    canvas.getContext(
    "
    2d
    "
    );
 
    //
    上下移动的直线
    

     
    var
     width
    =
    400
    ;
 
    var
     height
    =
    200
    ;
 
    var
     y
    =
    0
    
 
    var
     dir
    =
    1
    ;
 ctx.strokeStyle 
    =
     
    "
    rgb(255,0,0)
    "
    ;
 
 
    function
     draw(){
 ctx.clearRect(
    0
    ,
    0
    ,width,height)
 ctx.beginPath();
 ctx.moveTo(
    0
    ,y);
 ctx.lineTo(width
    -
    1
    ,y);
 ctx.stroke();
 y
    =
    y
    +
    dir;
 
    if
    ((y
    ==
    0
    )
    ||
    (y
    ==
    (height
    -
    1
    ))) dir
    =
    dir
    *
    (
    -
    1
    );
 }

    //
     ]]></script>
    

    <
    p
    ><
    input onclick
    =
    "
    interval=setInterval(draw,10);
    "
     type
    =
    "
    button
    "
     value
    =
    "
    开始
    "
     
    /
    > <input onclick="clearInterval(interval);" type="button" value="停止" 
    /
    >
     
    <
    /
    p>
   

HTML5边玩边学（1）：画布

HTML5边玩边学（2）：基础绘图

HTML5边玩边学（3）：像素和颜色