CSS/ target=_blank class=infotextkey>Html5 canvas一般形式：

<canvas id="" width="" height=""> 您的浏览器不支持canvas</canvas>
获取到的canvas元素会有getContext方法，该方法可以传进参数来获取上特定的下文变量，目前只支持"2d"这个参数，为将来做准备，可能支持"3d"js判断是否支持canvas，只需要判断获取的dom元素是否支持getContext即可

绘制矩形

     fillRect( x , y , width , height) ; // 绘制一个已经被填充的矩形，填充的样式根据前面设置的fillstyle
     strokeRect( x , y , width , height) ;// 画一个普通的矩形框，框的样式使用前面设置的strokeRect
     clearRect( x , y , width , height);// 清除相关矩形区域内的内容

 注意：画矩形与绘制路径不一样，这三个函数的效果会立刻在canvas是反映出来

 
绘制路径

需要步骤 : beginPath() , closePath() , stroke() , fill()
    
        第一步是使用beginPath在内存里创建一个路径，路径是以一组子路径的形式储存的，它们共同构成一个图形。每调用一次的beginPath，子路径都会被重置然后可以绘制新的图形。
        第二步就是实际绘制路径的部分
        第三步是调用closePath方法，它会尝试用直线连接当前端点与起始端点来关闭路径，但如果图形已经关闭或者只有一个点，它会什么都不做。这一步不是必须的。
        最后中一步是调用stroke和fill方法，这时图形才是实际的绘制到canvas上去，stroke是绘制边框，fill会填充出一个实心图形

 注意：当调用fill时，开放的路径会自动闭合，而无须调用closePath

 
绘制直线

使用lineTo来绘制直线， lineTo( x , y );

绘制弧线 使用arc来绘制弧线，arc( x , y , radius , startAngle , endAngle , anticlockwise )anticlockwise为true表示逆时针，默认为false表示顺时针


贝塞尔和二次方曲线

quadraticCurveTo( cp1x , cpy1 , x , y ); //二次方贝塞尔曲线

bezIErCurve( cp1x , cp1y , cp2x , cp2y , x , y) ;//三次方的贝塞尔曲线


矩形路径Rectangles
 
使用rect方法用于绘制矩形路径，rect( x , y , width , height )

使用图像

canvas可以用于图片合成或者制作背景等，而目前仅可以在图像中加入文字。

引入图片只需要简单的两步

    当然是来源图片，不是简单的URL，但可以是一个JAVAScript/ target=_blank class=infotextkey>JavaScript的image对象引用，又或者是其它的canvas元素。
    使用drawImage方法将图像插入到canvas中。

注意：只有等图片装载完成后才可以进行drawImage。

drawImage方法有三种形态：

    drawImage( image , x , y )   其中image是image或者canvas对象，x和y是其在目标canvas里的起始坐标
    drawImage( image , x , y , width , height ) 用于控制图像在canvas中缩放的参数
    drawImage( image , sx , sy , sWidth , sHeight , dx , dy , dWidth , dHeight ) 第一个是图像或者canvas对象，前面4个是切片的位置和大小，后4个则是定义切片的目标显示位置和大小

注意：getImageData 只有在网络图片，并且是在同一个域下的图片才有效