1. 随便创建一个画布

2. 绘制图形

3. 绘制直线

4. 绘制矩形

两种方法：

① context.fillStyle="指定一个颜色"

再用context.fillRect(x,y,width,height)填充颜色，绘制出矩形

② context.strokeStyle="设置轮廓颜色"

再用context.strokeRect(x,y,width,height)，绘制出轮廓

5. 绘制圆形

6. 清空画布

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

---

图形的变换

1. 保存与恢复Canvas状态

context.save（）：暂时将当前的状态保存在堆中

context.restore（）：将上一个保存的状态从堆中再次取出

2. 移动坐标空间

context.translate(x,y); //使坐标在默认左上角的x y发生变化

3. 旋转坐标空间

context.rotate(angle)

他只有一个参数，angle即旋转的角度，旋转角度以顺时针方向为正方向，以弧度为单位，旋转中心是canvas的原点

4. 缩放图形

context.scale(x,y)

x，y必须接受参数，x为在x轴的缩放因子，y在y轴上的缩放因子，他们的值必须是正值

---

颜色和样式选项

1. lineWidth：设置线条的粗细，他的值必须为正，默认为1.0

2. lineCap：设置线段端点样式，他有三个值，butt平头（默认值） round圆头 square方头

3.lineJoin：设置两条线段连接处的样式，他有三个值round  bevel miter（默认值）

4. miterLimit：当设置lineJoine为miter时，如果两条线发生相交时，可以设置该属性来设置长度的上限

绘制线性渐变

首先ctx.createLinearGradient（）创建对象

context.createLinearGradient（x1,y1,x2,y2）;

x1 y1为渐变的起点  x2y2为渐变的终点。

接着，addColorStop(position,color)来上色

position为渐变色中色标的相对位置，必须是0~1的一个浮点值，0起点1终点

绘制径向渐变

首先ctx.createRadialrGradient（）创建对象

context.createRadialrGradient（x1,y1,r1,x2,y2,r2）

x1y1原点，半径为r1的圆，再定义一个圆x2y2原点，半径为r2

接着，addColorStop方法上色

绘制图案

填充图案使用，createPattern方法

首先context.createPattern(image,type)，然后再赋予其fillStyle或者strokeStyle属性

image是引用的img对象或者另一个Canvas对象

type引用的是平铺类型：

repeat：同时沿x与y轴平铺

repeat-x：沿x轴平铺

repeat-y：沿y轴平铺

no-repeat：不平铺

设置图形的透明度

使用rgba（R,G,B,A）

A：透明程度，0~1的浮点值，0.0完全透明，1.0完全不透明

创建阴影

context.shadowOffsetX=float     // 正值向右，负值向左，阴影的水平偏移

context.shadowOffsetY=float     //正值向下，负值向上，阴影的垂直偏移

context.shadowBlur=float          //阴影羽化的程度

context.shadowColor=color      //阴影的颜色

---

绘制文字

1. 绘制填充文字

绘制文字使用的是fillText方法和strokeText方法，分别是以填充方式和轮廓方式绘制文字。

context.fillText(text,x,y,maxWidth)

text：文字

maxWidth：可选参数，文字的最大宽度

2. 文字的相关属性

font：用于指定正在绘制的文字的样式，默认字体样式font(10px sans-serif)

textAlign:用于正在绘制的文字的对齐方式，他有一下属性：

 start：如果文字从左到右排版，则左对齐，反之右对齐（默认值）

  end：如果文字从右到左排版，则左对齐，反之右对齐

left：左对齐     right：右对齐   center：居中对齐

textBaseline：用于指定正在绘制的文字的基线，有6种属性：

alphabetic：文本基线为通常字母基线

top：文本基线与字元正方向空间顶部对齐

hanging：悬挂的基线

middle：字元正方形空间的中间位置

ideographic：表意字基线

bottom：字元正方形空间底部的边界框对齐

3. 绘制轮廓文字

主要用strokeText方法

context.strokeText(text,x,y,maxWidth)

4. 测量文字宽度

使用measureText方法可以测量当前绘制文字中指定文字的宽度，该方法会返回一个TextMetrics对象，在用width属性得到指定文字的总宽度。

metrics=context.measureText(text)

alert(metrics.width);

---

操作与使用图像

 1. 项canvas中引入图像，需要经过两个步骤：①确定图像的来源     ②使用drawImage方法绘制到Canvas中

使用脚本创建Image对象

var image=new Image();

img.src="图像的地址"

或者

var image=new Image()

img.onload=function(){}

img.src="图像的地址"

然后使用drawImage方法绘制到Canvas中，他有三个方法：

①context.drawImage（image,x,y） //x y 要绘制到的起始位置

②context.drawImage(image,x,y,width,height)

③context.drawImage(image,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight)

sx  sy：源图像 被切割区域的起始坐标

swidth sHeight：源图像被切割下来的宽度和高度

dx dy：被切割下来的源图像要放置到目标Canvas的起始坐标

dWidth dHeight：被切割下来的源图像的宽度和高度