html5 canvas

简单的图形

fillStyle 可以设置css颜色、一个图案或一种颜色渐变，fillStyle默认纯黑色

fillRect(x,y,width,height)绘制一个矩形，并以当前fillStyle来填充

strokeStyle和fillStyle 一样

strokeRect(x,y,width,height)使用当前的strokeStyle来绘制一个矩形，strokeRect并不填充中间区域，而只是绘制边缘

clearRect(x,y,width,height)清除指定矩形区域的像素

your browser does not support the canvas tag 

your browser does not support the canvas tag 

简单的路径

canvas都有一个路径，定义路径如果用用铅笔作画，可以使用下面两个方法：

moveTo(x,y)把铅笔移动到指定点并作为线条的开始点

lineTo(x,y)绘制线条到指定的结束点

your browser does not support the canvas tag 

简单的文本

your browser does not support the canvas tag 

简单的图片

drawImage(image, dx, dy) 
drawImage(image, dx, dy, dw, dh) 
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)，其中（sx, sy, sw, sh）为图片裁剪范围

your browser does not support the canvas tag 

简单的渐变

your browser does not support the canvas tag