html5相关变换

变换操作并不限于缩放和平移，我们可以使用函数context.rotate(angle)来旋转图像，甚至可以直接修改底层变换矩阵以完成一些高级操作，如剪裁图像的绘制路径。如：context.rotate(1.57)，旋转角度参数以弧度为单位。

beginPath()：开始

moveTo(x,y)：起点坐标

lineTo(x,y)：目标坐标

closePath()：连接起点，闭合路径

translate()：移动

rotate()：旋转

restore()：恢复

scale()：缩放

save()：保存

rotate(angle)：旋转图像

quadraticCurveTo()：绘制曲线

stroke()：绘制

strokeText()：描绘文本轮廓

strokeStyle()：颜色设置

strokeRect()：使用当前的storke style来绘制一个矩形，而只绘制矩形的边缘。

fill：填充

fillRect()：绘制一个矩形，并以当前的fillStyle来填充

fillStyle()：样式填充

fillText：填充文本内容

drawIamge()：图片填充

createPattern()：使用背景图片填充

addColorStop()：渐变填充

createRadialGradient()：放射性渐变

clearRect()：清除指定矩形区域的像素

.lineCap（butt | square | round）：指定线条末端的样式

.fillStyle：设置为CSS颜色、一个图案或一种颜色渐变

.lineWidth：线条宽度设置

.lineJoin(round)：修改当前形状中线段的连接方式，让拐角变得更圆滑

.shadowColor：任何css中的颜色值，可以使用透明度(alpha)

.shadowOffsetX：像素值，值为正数，向右移动阴影;值为负数，向左移动阴影

.shadowOffsetY：像素值，值为正数，向下移动阴影;值为负数，向上移动阴影

.shadowBlur：高斯模糊值，值越大，阴影越模糊

CanvasRenderingContext2D 对象的方法

方法

描述

arc()

用一个中心点和半径，为一个画布的当前子路径添加一条弧线。

arcTo()

使用目标点和一个半径，为当前的子路径添加一条弧线。

beginPath()

开始一个画布中的一条新路径（或者子路径的一个集合）。

bezierCurveTo()

为当前的子路径添加一个三次贝塞尔曲线。

clearRect()

在一个画布的一个矩形区域中清除掉像素。

clip()

使用当前路径作为连续绘制操作的剪切区域。

closePath()

如果当前子路径是打开的，就关闭它。

createLinearGradient()

返回代表线性颜色渐变的一个 CanvasGradient 对象。

createPattern()

返回代表贴图图像的一个 CanvasPattern 对象。

createRadialGradient()

返回代表放射颜色渐变的一个 CanvasGradient 对象。

drawImage()

绘制一幅图像。

fill()

使用指定颜色、渐变或模式来绘制或填充当前路径的内部。

fillRect()

绘制或填充一个矩形。

lineTo()

为当前的子路径添加一条直线线段。

moveTo()

设置当前位置并开始一条新的子路径。

quadraticCurveTo()

为当前路径添加一条贝塞尔曲线。

rect()

为当前路径添加一条矩形子路径。

restore()

为画布重置为最近保存的图像状态。

rotate()

旋转画布。

save()

保存 CanvasRenderingContext2D 对象的属性、剪切区域和变换矩阵。

scale()

标注画布的用户坐标系统。

stroke()

沿着当前路径绘制或画一条直线。

strokeRect()

绘制（但不填充）一个矩形。

translate()

转换画布的用户坐标系统。