canvas---canvas常用方法，绘制直线，矩形，文本，画图，曲线，createLinearGradient，translate，stroke，fillText

• canvas标签属性

名称 作用 height canvas长度(不同于css中height) width canvas宽度(不同于css中width) data 返回一个对象，其包含指定的 ImageData 对象的图像数据

---

• canvas通用方法

方法 说明 canvas.getContext(contextID) 绘制类型，并返回环境对象，目前参数只有 2D可选 ctx.save() 保存当前环境 状态 ctx.restore() 返回之前保存过的路径状态 grad = ctx.createLinearGradient(x, y, x, y + h) 定义线性渐变色的范围，参数为起始点坐标 grad=context.createRadialGradient(x0,y0,r0,x1,y1,r1); 圆形渐变，参数为内外元坐标与半径 grad.addColor((0, ‘#ccaa66’)) 增加色点，参数分别为位置与色数 ctx.fillStyle=color gradient ctx.strokeStyle=color gradient ctx. shadowColor=color 阴影色 ctx.shadowBlur=number; 模糊距离 ctx.shadowOffsetX=number; 阴影水平偏差 ctx.shadowOffsetY=number; 阴影垂直偏差 ctx..scale(scalewidth,scaleheight); 放大 ctx.rotate(angle); 选择角度，如需旋转 5 度，可规定下面的公式：5*Math.PI/180。 ctx.translate(x,y); 把中心移动到x,y位置 ctx.transform(a,b,c,d,e,f); 矩阵变换

---

• 路径

方法 描述 ctx.beginPath(); 开始一条路径，或重置当前的路径(常用语绘制路径第一步) ctx.moveTo(x1, y1); 绘制路径起点 ctx.lineTo(x2, y2); 绘制直线，x2,y2为终点坐标 ctx.quadraticCurveTo(xK,yK,xE,yE); 绘制二次贝塞尔曲线,xK,yK,xE,yE分别为控制点坐标与 终点坐标，必须要使用beginPath与moveTo方法定义起点 ctx.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y); 绘制三次贝塞尔曲线cp1x,cp1y,cp2x,cp2y,x,y分别为控制点1、2坐标与终点坐标，其他等同二次曲线 ctx.arcTo(x1,y1,x2,y2,r);; 绘制弧线，x1,y1,x2,y2,r分别为弧线起点终点坐标与半径r ctx.arc(x,y,r,sAngle,eAngle,counterclockwise); 绘制圆弧。x,y,r,sAngle,eAngle,counterclockwise分别为圆的坐标、半径、起终角度、是否顺时针 ctx.stroke(); 绘制已经定义的路径 ctx.closePath(); 路径绘制完毕，进行绘制关闭

属性 描述 ctx.lineCap=butt/round/square 路径边缘样式(默认/圆/方) ctx.lineJoin=butt/round/square 路径拐角处样式(默认/圆/方) ctx.lineWidth=10 路径宽度，10即为10PX ctx.strokeStyle=’#f00’ 笔触颜色，可以用于路径矩形等的绘制，值可以为渐变色、十六位、rgba等

---

• 矩形

方法 说明 ctx.rect(x,y,w,h); 绘制空矩形，参数分别为起点坐标，宽高度 ctx.fill() 已设置好的色填充rect出的矩形 ctx.fillRect(x,y,w,h) 填充绘制矩形，等价于rect+fill ctx.strokeRect(x,y,w,h) 绘制非填充矩形 ctx.clearRect(x,y,w,h) 清空参数范围内矩形内容 grad = ctx.createLinearGradient(x, y, x, y + h) 定义渐变色的范围，参数为起始点坐标 grad.addColor((0, ‘#ccaa66’)) 增加色点，参数分别为位置与色数

---

• 文本

方法 说明 ctx.fillText(txt,x,y,w) 绘制填充色文本，参数分别为文本内容，坐标，最大宽度 ctx.strokeText(txt,x,y,w) 绘制非填充文本，参数同上 ctx.measureText(txt) 方法返回一个对象，该对象包含以像素计的指定字体宽度 ctx.font=’style’ 设置字体样式，参数可以是字号，字体，字粗等的集合字符串 ctx.textAlign=center/left/right 文本设置居中/靠左/靠右 ctx.baseLine=top/middle/bottom 设置文本的基线位置

---

• 画图

方法 说明 context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); 参数分别为资源、图像被剪切坐标sx、sy，被剪切宽高度，画布上放置坐标X，y与使用的图像宽高width、height。所有参数只有，img、x、y为必选