CanvasContext
CanvasContext.arc(number x, number y, number r, number sAngle, number eAngle, boolean counterclockwise)
创建一条弧线。
- 创建一个圆可以指定起始弧度为 0，终止弧度为 2 * Math.PI。
- 用
stroke或者fill方法来在canvas中画弧线。
参数
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| x | number | 是 | 圆心的 x 坐标 |
| y | number | 是 | 圆心的 y 坐标 |
| r | number | 是 | 圆的半径 |
| sAngle | number | 是 | 起始弧度，单位弧度（在3点钟方向） |
| eAngle | number | 是 | 终止弧度 |
| counterclockwise | boolean | 否 | 弧度的方向是否是逆时针 |
CanvasContext.arcTo(number x1, number y1, number x2, number y2, number radius)
根据控制点和半径绘制圆弧路径。
参数
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| x1 | number | 是 | 第一个控制点的 x 轴坐标 |
| y1 | number | 是 | 第一个控制点的 y 轴坐标 |
| x2 | number | 是 | 第二个控制点的 x 轴坐标 |
| y2 | number | 是 | 第二个控制点的 y 轴坐标 |
| radius | number | 是 | 圆弧的半径 |
| counterclockwise | boolean | 否 | 弧度的方向是否是逆时针 |
CanvasContext.beginPath()
开始创建一个路径。需要调用 fill 或者 stroke 才会使用路径进行填充或描边
- 在最开始的时候相当于调用了一次
beginPath。 - 同一个路径内的多次
setFillStyle、setStrokeStyle、setLineWidth等设置，以最后一次设置为准。
CanvasContext.bezierCurveTo(number cp1x, number cp1y, number cp2x, number cp2y, number x, number y)
创建三次方贝塞尔曲线路径。曲线的起始点为路径中前一个点。
参数
| 参数 | 类型 | 说明 |
|---|---|---|
| cp1x | number | 第一个贝塞尔控制点的 x 坐标 |
| cp1y | number | 第一个贝塞尔控制点的 y 坐标 |
| cp2x | number | 第二个贝塞尔控制点的 x 坐标 |
| cp2y | number | 第二个贝塞尔控制点的 y 坐标 |
| x | number | 结束点的 x 坐标 |
| y | number | 结束点的 y 坐标 |
CanvasContext.clearRect(number x, number y, number width, number height)
清除画布上在该矩形区域内的内容
参数
number x
矩形路径左上角的横坐标
number y
矩形路径左上角的纵坐标
number width
矩形路径的宽度
number height
矩形路径的高度
CanvasContext.clip()
从原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。可以在使用 clip 方法前通过使用 save 方法对当前画布区域进行保存，并在以后的任意时间通过restore方法对其进行恢复。
CanvasContext.closePath()
关闭一个路径。会连接起点和终点。如果关闭路径后没有调用 fill 或者 stroke 并开启了新的路径，那之前的路径将不会被渲染。
CanvasGradient CanvasContext.createCircularGradient(number x, number y, number r)
创建一个圆形的渐变颜色。起点在圆心，终点在圆环。返回的CanvasGradient对象需要使用 CanvasGradient.addColorStop()来指定渐变点，至少要两个。
参数
number x
圆心的 x 坐标
number y
圆心的 y 坐标
number r
圆的半径
返回值
CanvasGradient
CanvasGradient CanvasContext.createLinearGradient(number x0, number y0, number x1, number y1)
创建一个线性的渐变颜色。返回的CanvasGradient对象需要使用 CanvasGradient.addColorStop() 来指定渐变点，至少要两个。
参数
number x0
起点的 x 坐标
number y0
起点的 y 坐标
number x1
终点的 x 坐标
number y1
终点的 y 坐标
返回值
CanvasGradient
CanvasContext.createPattern(string image, string repetition)
对指定的图像创建模式的方法，可在指定的方向上重复元图像
参数
string image
重复的图像源，支持代码包路径和本地临时路径 (本地路径)
string repetition
如何重复图像
repetition 的合法值
| 值 | 说明 |
|---|---|
| repeat | 水平竖直方向都重复 |
| repeat-x | 水平方向重复 |
| repeat-y | 竖直方向重复 |
| no-repeat | 不重复 |
CanvasContext.draw(boolean reserve, function callback，boolen useHardwareAccelerate )
将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。
参数
boolean reserve
本次绘制是否接着上一次绘制。即 reserve 参数为false，则在本次调用绘制之前 native 层会先清空画布再继续绘制；若 reserve参数为 true，则保留当前画布上的内容，本次调用 drawCanvas绘制的内容覆盖在上面，默认 false。
function callback
绘制完成后执行的回调函数
boolen useHardwareAccelerate
是否使用硬件加速
CanvasContext.drawImage(string imageResource, number sx, number sy, number sWidth, number sHeight, number dx, number dy, number dWidth, number dHeight)
参数
string imageResource
所要绘制的图片资源（网络图片要通过 getImageInfo / downloadFile 先下载）
number sx
需要绘制到画布中的，imageResource的矩形（裁剪）选择框的左上角 x 坐标
number sy
需要绘制到画布中的，imageResource的矩形（裁剪）选择框的左上角 y 坐标
number sWidth
需要绘制到画布中的，imageResource的矩形（裁剪）选择框的宽度
number sHeight 需要绘制到画布中的，imageResource的矩形（裁剪）选择框的高度
number dx
imageResource的左上角在目标 canvas 上 x 轴的位置
number dy
imageResource的左上角在目标 canvas 上 y 轴的位置
number dWidth
在目标画布上绘制imageResource的宽度，允许对绘制的imageResource进行缩放
number dHeight
在目标画布上绘制imageResource的高度，允许对绘制的imageResource进行缩放
CanvasContext.fill()
对当前路径中的内容进行填充。默认的填充色为黑色。
CanvasContext.fillRect(number x, number y, number width, number height)
填充一个矩形。用 setFillStyle 设置矩形的填充色，如果没设置默认是黑色。
参数
number x
矩形路径左上角的横坐标
number y
矩形路径左上角的纵坐标
number width
矩形路径的宽度
number height
矩形路径的高度
CanvasContext.fillText(string text, number x, number y, number maxWidth)
在画布上绘制被填充的文本
参数
string text
在画布上输出的文本
number x
绘制文本的左上角 x 坐标位置
number y
绘制文本的底部 y 坐标位置
number maxWidth
需要绘制的最大宽度，可选
CanvasContext.lineTo(number x, number y)
增加一个新点，然后创建一条从上次指定点到目标点的线。用 stroke方法来画线条
参数
number x
目标位置的 x 坐标
number y
目标位置的 y 坐标
Object CanvasContext.measureText(string text)
测量文本尺寸信息。目前仅返回文本宽度。同步接口。
参数
string text
要测量的文本
返回值
Object
| 属性 | 类型 | 说明 |
|---|---|---|
| width | number | 文本的宽度 |
CanvasContext.moveTo(number x, number y)
把路径移动到画布中的指定点，不创建线条。用 stroke 方法来画线条
参数
number x
目标位置的 x 坐标
number y
目标位置的 y 坐标
CanvasContext.quadraticCurveTo(number cpx, number cpy, number x, number y)
创建二次贝塞尔曲线路径。曲线的起始点为路径中前一个点。
参数
number cpx
贝塞尔控制点的 x 坐标
number cpy
贝塞尔控制点的 y 坐标
number x
结束点的 x 坐标
number y
结束点的 y 坐标
CanvasContext.rect(number x, number y, number width, number height)
创建一个矩形路径。需要用 fill 或者 stroke 方法将矩形真正的画到 canvas 中
参数
number x
矩形路径左上角的横坐标
number y
矩形路径左上角的纵坐标
number width
矩形路径的宽度
number height
矩形路径的高度
CanvasContext.restore()
恢复之前保存的绘图上下文。
CanvasContext.rotate(number rotate)
未找到框架对应实现位置以原点为中心顺时针旋转当前坐标轴。多次调用旋转的角度会叠加。原点可以用translate 方法修改。
参数
number rotate
旋转角度，以弧度计 degrees * Math.PI/180；degrees 范围为 0-360
CanvasContext.save()
保存绘图上下文。
CanvasContext.scale(number scaleWidth, number scaleHeight)
在调用后，之后创建的路径其横纵坐标会被缩放。多次调用倍数会相乘。
参数
number scaleWidth
横坐标缩放的倍数 (1 = 100%，0.5 = 50%，2 = 200%)
number scaleHeight
纵坐标轴缩放的倍数 (1 = 100%，0.5 = 50%，2 = 200%)
CanvasContext.setFillStyle(string|CanvasGradient color)
设置填充色。
参数
string|CanvasGradient color
填充的颜色，默认颜色为 black。
CanvasContext.setFontSize(number fontSize)
设置字体的字号
参数
number fontSize
字体的字号
CanvasContext.setGlobalAlpha(number alpha)
设置全局画笔透明度。
参数
number alpha
透明度。范围 0-1，0 表示完全透明，1 表示完全不透明。
CanvasContext.setLineCap(string lineCap)
设置线条的端点样式
参数
string lineCap
线条的结束端点样式
lineCap 的合法值
| 值 | 说明 |
|---|---|
| butt | 向线条的每个末端添加平直的边缘。 |
| round | 向线条的每个末端添加圆形线帽。 |
| square | 向线条的每个末端添加正方形线帽。 |
CanvasContext.setLineDash(Array.<number> pattern, number offset)
设置虚线样式。
参数
Array.<number> pattern
一组描述交替绘制线段和间距（坐标空间单位）长度的数字
number offset
虚线偏移量
CanvasContext.setLineJoin(string lineJoin)
设置线条的交点样式
参数
string lineJoin
线条的结束交点样式
lineJoin 的合法值
| 值 | 说明 |
|---|---|
| bevel | 斜角 |
| round | 圆角 |
| miter | 尖角 |
CanvasContext.setLineWidth(number lineWidth)
设置线条的宽度
参数
number lineWidth
线条的宽度，单位px
CanvasContext.setMiterLimit(number miterLimit)
设置最大斜接长度。斜接长度指的是在两条线交汇处内角和外角之间的距离。当 CanvasContext.setLineJoin() 为 miter 时才有效。超过最大倾斜长度的，连接处将以 lineJoin 为 bevel 来显示。
参数
number miterLimit
最大斜接长度
CanvasContext.setShadow(number offsetX, number offsetY, number blur, string color)
设定阴影样式。
参数
number offsetX
阴影相对于形状在水平方向的偏移，默认值为 0。
number offsetY
阴影相对于形状在竖直方向的偏移，默认值为 0。
number blur
阴影的模糊级别，数值越大越模糊。范围 0- 100。，默认值为 0。
string color
阴影的颜色。默认值为 black。
CanvasContext.setStrokeStyle(string|CanvasGradient color)
设置描边颜色。
参数
string|CanvasGradient color
描边的颜色，默认颜色为 black。
CanvasContext.setTextAlign(string align)
设置文字的对齐
参数
string align
文字的对齐方式
align 的合法值
| 值 | 说明 |
|---|---|
| left | 左对齐 |
| center | 居中对齐 |
| right | 右对齐 |
CanvasContext.setTextBaseline(string textBaseline)
设置文字的竖直对齐
参数
string textBaseline
文字的竖直对齐方式
textBaseline 的合法值
| 值 | 说明 |
|---|---|
| top | 顶部对齐 |
| bottom | 底部对齐 |
| middle | 居中对齐 |
| normal | 默认 |
CanvasContext.setTransform(number scaleX, number skewX, number skewY, number scaleY, number translateX, number translateY)
使用矩阵重新设置（覆盖）当前变换的方法
参数
number scaleX
水平缩放
number skewX
水平倾斜
number skewY
垂直倾斜
number scaleY
垂直缩放
number translateX
水平移动
number translateY
垂直移动
CanvasContext.stroke()
画出当前路径的边框。默认颜色色为黑色。
CanvasContext.strokeRect(number x, number y, number width, number height)
画一个矩形(非填充)。 用 setStrokeStyle 设置矩形线条的颜色，如果没设置默认是黑色。
参数
number x
矩形路径左上角的横坐标
number y
矩形路径左上角的纵坐标
number width
矩形路径的宽度
number height
矩形路径的高度
CanvasContext.strokeText(string text, number x, number y, number maxWidth)
给定的 (x, y) 位置绘制文本描边的方法
参数
string text
要绘制的文本
number x
文本起始点的 x 轴坐标
number y
文本起始点的 y 轴坐标
number maxWidth
需要绘制的最大宽度，可选
CanvasContext.transform(number scaleX, number skewX, number skewY, number scaleY, number translateX, number translateY)
使用矩阵多次叠加当前变换的方法
参数
number scaleX
水平缩放
number skewX
水平倾斜
number skewY
垂直倾斜
number scaleY
垂直缩放
number translateX
水平移动
number translateY
垂直移动
CanvasContext.translate(number x, number y)
对当前坐标系的原点 (0, 0) 进行变换。默认的坐标系原点为页面左上角。
参数
number x
水平坐标平移量
number y
竖直坐标平移量