html

 <canvas id= "canvas"></canvas>

 javascript

 var canvas = document.getElementById('canvas')

 var context =canvas.getContext('2d')

 //使用context进行绘制

 canvas.width

 canvas.height

 canvas.getContext('2d')

 moveTo(x,y)

 lineTo(x,y)

 beginPath()

 closePath()

 lineWith                     //线条宽度

 strokeStyle                  //线条样式

 fillStyle                    //填充颜色

 stroke()                     //绘制

 fill()                       //填充

 rect(x,y,width,height)       //勾勒矩形边框路径

 fillRect(x,y,width,height)   //填充矩形

 strokeRect(x,y,width,height) //绘制带边框的路径

 //线条属性

 lineWith                     //线条宽度

 lineCap="butt"(default)      //线条帽子的形状

         "round"                圆形

         "square"               方形

 lineJion="miter"(default)      尖角

          "bevel"               斜切

          "round"               圆角

     miterLimit

 //图形变换

 save()

 restore()

 translate(x,y)

 rotate(deg)

 scale(sx,sy)

 //变换矩阵

 [a c e]    [水平缩放(1)   垂直倾斜(0)   水平位移(0)]

 [b d f]    [水平倾斜(0)   垂直缩放(1)   垂直位移(0)]

 [0 0 1]

 transfrom(a,b,c,d,e,f)      //效果会累加

 setTransform(a,b,c,d,e,f)   //仅使用该效果

 //渐变色和纹理

 fillStyle = color / gradient / image / canvas / video

             color格式：#ffffff / #642 / rgb / rgba / hsl / hsla / red

             gradient格式：Linear Gradient(线性渐变)

                           var grd = context.createLinearGradient(xstart,ystart,xend,yend);

                           Radial Gradient(径向渐变)

                           var grd = context.createRadialGradient(xstart,ystart,xend,yend);

                         grd.addColorStop(stop,color);

             image||canvas||video格式：

                           createPattern(img / canvas / video , repeat-style)

                           repeat-style:no-repeat / repeat-x / repeat-y / repeat

 //曲线的绘制

 context.arc(centerx,centery,radius,startingAngle,endingAngle,anticlockwise=false)

 context.crcTo(x1,y1,x2,y2,radius)

 context.quadraticCurveTo(x1,y1,        //控制点

                          x2,y2)        //结束点

 context.bezeirCurveTo(x1,y1,x2,y2,     //控制点

                       x3,y3)           //结束点

 //文字渲染

 context.font="bold 40px Arial"

 context.fillText(string,x,y,[maxlen]);

 context.strokeText(string,x,y,[maxlen]);

 font

 默认值："20px sans-serif"

 context.font = font-style  font-variant  font-weight  font-size  font-family

                font-style:  normal       (Default)

                             italic       (斜体字)

                             oblique      (倾斜字体)

                font-variant:normal       (Default)

                             small-caps   (以英文小写显示大写字母)

                font-weight: lighter

                             normal       (Deafult)

                             bold

                             bolder

                             100,200,300,400(normal),500,600,700(bold),800,900

                font-size:   20px         (Deafult)

                             2em

                             150%

                             xx-small  x-small  medium  large  x-large  xx-large

                font-famly:  设置多种字体备选 / 支持@font-face / web安全字体

 context.textAlign = left / center / right

 context.textBaseline = top / middle / bottom   (垂直对齐)

                        alphabetic(Deafult)     (基于拉丁字母设计的垂直对齐)

                        ideographic             (基于方块字体设计的垂直对齐)

                        hanging                 (基于印度语设计的垂直对齐)

 //图片

 drawImage(image,dx,dy)

 drawImage(image,dx,dy,dw,dh)

 drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)

         dx,dy：image在canvas中定位的坐标值；

         dw,dh：image在canvas中即将绘制区域的宽高；（相对于dx,dy坐标的偏移量）

         sx,sy：image在canvas中所要绘制的起始位置；

         sw,sh：image在canvas中所要绘制区域的宽高；（相对于sx,sy坐标的偏移量）

 getImageData(x,y,w,h)

 putImageData(imgdata,dx,dy,sx,sy,sw,sh)

 createImageData(sw,sh)

 createImageData(imagedata)

 //阴影

 context.shadowColor

 context.shadowOffsetX        //X偏移

 context.shadowOffsetY        //Y偏移

 context.shadowBlur           //模糊

 //高级

 globalAlpha = 1              (默认值)

 globalCompositeOperation = "source-over"        (默认值)

           参数：source-over         destination-over              lighter

                 source-atop         destination-atop              copy

                 source-in           destination-in                xor

                 source-out          destination-out

 //路径方向和剪纸效果

      非零环绕原则

 //剪辑区域

 context.clip();              =>探照灯

 //交互

 context.clearRect(x,y,width,height)

 context.isPointInPath(x,y)