canvas 绘图的步骤

1 得到canvas的dom节点 var demo=document.getElementById('cs');

2 得到canvas 节点对应的2d绘图环境 var context=demo.getContext('2d');

3 可以开始绘图了...

•    绘制线的函数   

          画一条线，可以简单的用

          context.moveTo(100,100);
  context.lineTo(200,100);

          context.stroke();

          画多条线，可以认为是路径，需要用到beginPath 和 closePath方法

          context.beginPath();
  context.moveTo(100,200);
  context.lineTo(200,200);
          context.stroke();

          context.close();

• 绘制矩形框  strokeRect(x, y, width, height)
• 绘制填空的矩形 fillRect(x, y, weight, height)
• 写字context.fillText(text,x,y,maxWidth);