初识Canvas

canvas元素（标签）是HTML5中新增的一个重要元素，它被用来专门绘制图形（当然和以前的svg、vml是有区别的）。
在页面上放置一个canvas元素，就相当于在页面上放置了一块“画布”，可以在其中描绘图形。
但是，在canvas元素里进行绘画，并不是指用鼠标进行作画。事实上，canvas元素只是一块无色透明区域。需要利用JavaScript编写在其中的绘画脚本。
现在我们简单的在canvas绘制一个三角形:

首先我们在页面（html）中添加一个canvas元素，可利用其自有属性设置宽高

  //设置一个宽度为800px，高度为600px的画布
  <canvas width="800" height="600" id="c1"></canvas>

为了在页面中更好的区分，我们来设置下style样式吧

//将页面背景设成黑色
body{ background-color: #000;}
//将画布背景设成白色，以便我们更好的进行区分
canvas{ background-color: #fff;}

接下来重点来了，我们利用js来操作它

document.addEventListener('DOMContentLoaded',function(){    
    //我们用getId方法获取页面中的canvas元素（我们要画画是不是得有一张纸） 
    var oC = document.getElementById('c1');   
   //定义一支画笔或称上下文（我们要画画是不是得有一支笔）    
    var gd = oC.getContext('2d');  
    //定义画笔颜色（我们要画画是不是得选取我们使用什么颜色的笔）    
    gd.strokeStyle = 'red';   
   //定义画笔粗细 （我们要画画是不是得选取我们使用类型的笔，钢笔？毛笔？铅笔？等等吧）    
    gd.lineWidth = 20;  
    //定义一个起始点（也就是下笔点的X坐标，y左边），注意坐标原点位于整个画布的左上角那个点
    gd.moveTo(329,329); 
    //第二个点 
    gd.lineTo(503,167);   
    //第三个点
    gd.lineTo(597,405);  
    //再将画笔连到开始点（若不连则不会自动闭合，后面我们会说如何自动将首尾闭合）  
   gd.lineTo(329,329); 
   //描边（画完后我们得描边，要不然我们做的选区）  
   gd.stroke();
},false);

这样我们一个简单的三角形就出来了,让我们一起来看看效果吧！