标签：
canvas元素绘制图像的时候有两种方法，分别是
context.fill()//填充
context.stroke()//绘制边框
style:在进行图形绘制前，要设置好绘图的样式
context.fillStyle//填充的样式
context.strokeStyle//边框样式
context.lineWidth//图形边框宽度
颜色的表示方式:
rgb(1-255,1-255,1-255)
rgba(1-255,1-255,1-255,透明度)
canvas 方法：
| 方法 | 用途 |
|---|---|
getContext(contextId) |
公开在 canvas 上绘图需要的 API。惟一（当前）可用的 contextID 是 2d。 |
height |
设置 canvas 的高度。默认值是 150 像素。 |
width |
设置 canvas 的宽度。默认值是 300 像素。 |
createLinearGradient(x1,y1,x2,y2) |
创建一个线性渐变。起始坐标为 x1,y1，结束坐标为 x2,y2。 |
createRadialGradient(x1,y1,r1,x2,y2,r2) |
创建一个放射状渐变。圆圈的起始坐标是 x1,y1，半径为 r1。圆圈的结束坐标为 x2,y2，半径为 r2。 |
addColorStop(offset, color) |
向一个渐变添加一个颜色停止。颜色停止（color stop） 是渐变中颜色更改发生的位置。offset 必须介于 0 到 1 之间。 |
fillStyle |
设置用于填充一个区域的颜色 — 例如，fillStyle=‘rgb(255,0,0)‘. |
strokeStyle |
设置用于绘制一根直线的颜色 — 例如，fillStyle=‘rgb(255,0,0)‘. |
fillRect(x,y,w,h) |
填充一个定位于 x 和 y，宽度和高度分别为 w 和 h 的矩形。 |
strokeRect(x,y,w,h) |
绘制一个定位于 x 和 y，宽度和高度分别为 w 和 h 的矩形的轮廓。 |
moveTo(x,y) |
将绘图位置移动到坐标 x,y。 |
lineTo(x,y) |
从绘图方法结束的最后位置到 x,y 绘制一条直线。 |
绘制矩形 context.fillRect(x,y,width,height) strokeRect(x,y,width,height)
x:矩形起点横坐标（坐标原点为canvas的左上角，当然确切的来说是原始原点，）
y:矩形起点纵坐标
width:矩形长度
height:矩形高度
标签：
原文地址：http://www.cnblogs.com/theWayToAce/p/5440300.html
