常用canvas方法介绍

getContext 方法

语法: Canvas.getContext( typeStr )

描述:

1. 该方法用于绘制上下文工具.
2. 如果是绘制平面图形使用 '2d' 作为参数, 如果绘制立体图形使用 'webgl'.
3. 使用 '2d' 返回 CanvasRenderingContext2D 类型的对象.
4. 使用 'webgl' 返回 WebGLRenderingContext 类型的对象.

moveTo 方法

语法: CanvasRenderingContext2D.moveTo( x, y )

描述:

1. 该方法用于设置绘制起点.
2. 其中参数 x, y 表示在坐标系中的位置, 分别是 x 坐标与 y 坐标.

lineTo 方法

语法: CanvasRenderingContext2D.lineTo( x, y )

描述:

1. 该方法用于设置需要绘制直线的另一个点. 最终描边后会连线当前点和方法参数描述的点.
2. 其中参数 x, y 表示在坐标系中的位置, 分别是 x 坐标与 y 坐标.

stroke 方法

语法: CanvasRenderingContext2D.stroke()

描述: 该方法用于连线, 将描述的所有点按照指定顺序连接起来.

fill 方法

语法: CanvasRenderingContext2D.fill()

描述: 该方法会按照描绘的点的路径来填充图形. 默认是黑色.

closePath 方法

语法: CanvasRenderingContext2D.closePath()

描述: 使用该方法可以将最后一个描点与最开始的描点自动连接起来.

 closePath 方法

语法: CanvasRenderingContext2D.closePath()

描述: 使用该方法可以将最后一个描点与最开始的描点自动连接起来.

绘制制矩形框

strokeRect方法

语法: CanvasRenderingContext2D.strokeRect( x, y, width. height )

描述:

1. 用来绘制一个矩形. 比起直接使用 moveTo 和 lineTo 方法要简单许多.
2. 该方法的前两个参数表示绘制矩形的左上角的坐标. 后两个参数表示这个矩形的宽高.
3. 使用该方法不需要使用 moveTo 方法设置起始点, 也不需要调用 stroke 等绘画方法.
4. 绘制的矩形支持 strokeStyle 设置颜色样式.

 绘制填充矩形

fillRect方法

语法: CanvasRenderingContext2D.fillRect( x, y, width. height )

描述:

1. 用来绘制一个矩形. 比起直接使用 moveTo 和 lineTo 方法要简单许多.
2. 该方法的前两个参数表示绘制矩形的左上角的坐标. 后两个参数表示这个矩形的宽高.
3. 使用该方法不需要使用 moveTo 方法设置起始点, 也不需要调用 stroke 等绘画方法.
4. 绘制的矩形支持 fillStyle 设置颜色样式.

清除矩形区域

clearRect方法

语法: CanvasRenderingContext2D.clearRect( x, y, width, height )

描述:

1. 用于清除画布中的矩形区域的内容.
2. 参数 x, y 表示矩形区域左上角的坐标, width 与 height 表示矩形区域的宽高.

 绘制圆弧

语法: CanvasRenderingContext2D.arc( x, y, radius. startAngle. endAngle, anticlockwise )

描述:

1. 该方法用于绘制一段弧, 配合开始点的位置 与 stroke 方法或 fill 方法可以绘制扇形.
2. 方法中的前两个参数 x, y 表示绘制圆弧的圆心坐标.
3. 参数 radius 表示圆弧半径, 单位为弧度.
4. 参数 startAngle 与 endAngle 表示开始到结束的角度. 角度以水平向右为 0 弧度, 顺时针为正方向.
5. 参数 anticlockwise 表示是否采用默认的正向角度, 如果传入 true 表示逆指针为正. 该参数可选.