[html5]html5中Canvas标签用法使用实例

 一、什么是Canvas标签？Canvas标签有什么用途？
这里过多的概念性解释我就不多写了的，大家完全可以百度、Google一下即可清楚更多。Canvas就是HTML5内新增的一个API标签。
<canvas> 标签定义图形，比如图表和其他图像。
<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

二、如何使用Canvas API来画一个正方形，并加上对角线？
1、首先在HTML内设置一个Canvas标签，并设置其Height和Width，以及Border属性，代码如下： 

<!-- canvas target -->   
<canvas id="diagonal" height="200px" width="200px" style="border:1px solid #000000;">               
</canvas>   

2、结合JS在Canvas区域内画图

function drawDiagonal() {   
    //取得canvas的元素及其绘图上下文   
    var canvasObj = document.getElementById("diagonal");   
    var context = canvasObj.getContext("2d");   
    //用绝对坐标来创建一条路径   
    //画两条对角线   
    context.beginPath();   
    //将点移动至原点   
    context.moveTo(0, 0);   
    //划线至右下角   
    context.lineTo(200, 200);   
    //将这条线绘制到canvas上   
    context.stroke();   
   
    //将点移动至右下角   
    context.moveTo(0, 200);   
    //划线至右上角   
    context.lineTo(200, 0);   
    //将这条线绘制到canvas上   
    context.stroke();   
}   
//页面导入的时候执行画图程序   
window.addEventListener("load", drawDiagonal, true);   

3、运行页面后效果图如下

来源：http://blog.csdn.net/china_skag/article/details/17068265