H5学习----Canvas(二)

2.相关api

• 要想绘制其他的图形，需要使用路径，执行步骤如下：
  • 创建路径 beginPath(),该方法没有参数。
  • 创建图形的路径
  • 路径创建完成后，关闭路径， closePath(),该方法没有参数。如果路径不进行关闭，则会永远的保留在画布上。
  • 设定绘制样式，调用绘制方法，绘制路径。使用fill()或storke()进行样式填充。
• 绘制圆形的方法： context.arc(x, y, radius, startAngle, endAngle, anticlockwise), x, y为绘制圆形的横纵坐标， radius为半径, startAngle和endAngle分贝为开始角度和结束角度，anticlockwise为是否按顺时针方向进行绘制。
• 直线绘制： moveTo(x, y)和lineTo(x, y).前一个方法将光标移动指定坐标点，以该点为起始点进行绘制。后一个方法在指定的起点和终点进行绘制一条直线。
• 绘制线性渐变图形, createLinearGradient(xStart, yStart, xEnd, yEnd)，xStart和yStart分别为起始点的横纵坐标，xEnd、yEnd为终点的横纵坐标。再通过addColorStop(offset, color)进行颜色的设定，offset为偏移量没，范围0-1.
• 绘制径向渐变图形, createRadialGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd)，xStart, yStart分别为起始点的圆心横纵坐标，xEnd、yEnd为圆心终点的横纵坐标，radiusStart为开始的圆的半径，radiusEnd为结束的圆的半径。
• 坐标变换：
  • 平移：translate(x, y) x为水平移动的距离，y同理。
  • 大小变换：scale(x, y)， x为水平放大的倍数，y同理。
  • 旋转: rotate(angle)
• 绘制图形阴影：
  • shadowOffsetX——阴影的横向偏移量
  • shadowOffsetY——阴影的纵向偏移量
  • shadowColor——阴影的颜色
  • shadowBlur——阴影的模糊范围
• 绘制图像：
  • drawImage(image, x, y): image为Image对象, x, y为绘制该图像的起始坐标。
  • drawImage(image, x, y，w, h): w，h为绘制该图像在画布内的大小，默认为和原图大小一致。
• 图像平铺： createPattern(image, type), type为以下几个字符串：
  • no-repeat: 不平铺
  • repeat-x: 横方向平铺
  • repeat-x: 纵方向平铺
  • repeat: 全方向平铺
• 绘制文字, fillText(text, x, y, [maxWidth]): text为绘制内容， x，y为绘制的起始横纵坐标，maxWidth为显示的最大的宽度,可选。
• 保存文件：toDataUrl(type), type: 输出的MIME类型，如：image/png