开发
API

CanvasContext

canvas 组件 V1 的上下文(即 canvas 组件未指定 type 属性)。可以用来控制如何在画布中绘制。可通过 tt.createCanvasContext 获取。

方法

CanvasContext.draw(boolean reserve, function callback)

将之前在绘图上下文中的描述(路径、变形、样式)画到 canvas 中。

CanvasContext.beginPath()

开始创建一个新的路径,需要调用 CanvasContext.fill 或者 CanvasContext.stroke 才会使用路径进行填充或描边。

CanvasContext.clip()

从原始画布中剪切任意形状和尺寸。一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内(即不能访问画布上的其他区域)。可以在使用 clip 方法前通过使用 CanvasContext.save 方法对当前画布区域进行保存,并在以后的任意时间通过 CanvasContext.restore 方法对其进行恢复。

CanvasContext.lineTo(number x, number y)

增加一个新点,然后创建一条从上次指定点到目标点的线。用 CanvasContext.stroke 方法来绘制线条。

CanvasContext.setFontSize(number fontSize)

设置字体的字号。

CanvasContext.setFillStyle(CanvasColor color)

设置填充的颜色。

CanvasContext.createLinearGradient(number x0, number y0, number x1, number y1)

创建一个线性的渐变颜色。返回的 CanvasGradient 对象需要使用 CanvasGradient.addColorStop 来指定渐变点,至少要两个。

CanvasContext.setStrokeStyle(CanvasColor color)

设置边框颜色。

CanvasContext.setGlobalAlpha(number alpha)

设置全局画笔透明度。

CanvasContext.setShadow(number offsetX, number offsetY, number blur, string color)

设置阴影的位置和颜色。

CanvasContext.setLineDash(Array pattern, number offset)

设置线条虚线样式的间距和长度。

CanvasContext.fill()

对当前路径中的内容进行填充。默认的填充色为黑色。

CanvasContext.stroke()

用于画出当前路径的边框。默认颜色为黑色。

CanvasContext.fillRect(number x, number y, number width, number height)

填充一个矩形。默认颜色为黑色,可通过 CanvasContext.setFillStyle 设置矩形颜色。

CanvasContext.strokeRect(number x, number y, number width, number height)

画一个矩形(非填充)。默认线条颜色为 black,可通过 CanvasContext.setStrokeStyle 设置线条颜色。

CanvasContext.drawImage(string imageResource, number sx, number sy, number sw, number sh, number dx, number dy, number dw, number dh)

绘制图像到画布。

CanvasContext.measureText(string text)

测量文本尺寸信息。目前仅返回文本宽度。

CanvasContext.scale(number scaleWidth, number scaleHeight)

在调用后,之后创建的路径其横纵坐标会被缩放。多次调用倍数会相乘。

CanvasContext.rotate(number rotate)

以原点为中心顺时针旋转当前坐标轴。多次调用旋转的角度会叠加。原点可以用 CanvasContext.translate 方法修改。

CanvasContext.translate(number x, number y)

变换当前坐标系的原点 (0, 0) 。默认的坐标系原点为页面左上角。

CanvasContext.save()

保存绘图上下文,保存当前的绘制状态,包括变换矩阵、剪切区域、虚线列表等。

CanvasContext.restore()

恢复之前保存的绘图上下文。包括变换矩阵、剪切区域、虚线列表等。

CanvasContext.clearRect(number x, number y, number width, number height)

清除画布上在该矩形区域内的内容。

CanvasContext.fillText(string text, number x, number y, number maxWidth)

在画布上填充指定文本。

CanvasContext.setTextAlign(string align)

设置文字的对齐方式。

CanvasContext.setLineCap(string lineCap)

设置线条的端点样式。

CanvasContext.setLineJoin(string lineJoin)

设置线条的交点样式。不设置时默认为尖角样式。

CanvasContext.setLineWidth(number lineWidth)

设置线条的宽度。不设置时线条宽度默认为 1px。

CanvasContext.setMiterLimit(number miterLimit)

设置最大斜接长度。斜接长度指的是在两条线交汇处内角和外角之间的距离。当 CanvasContext.setLineJoin 参数为 miter 时才有效。超过最大倾斜长度的,连接处将以 lineJoinbevel 来显示。

CanvasContext.setTextBaseline(string textBaseline)

设置文字垂直方向的对齐方式。不设置时表现默认为 alphabetic。

CanvasContext.transform(number scaleX, number skewX, number skewY, number scaleY, number translateX, number translateY)

使用矩阵多次叠加当前变换的方法,矩阵由方法的参数进行描述。可以缩放、旋转、移动和倾斜上下文。

CanvasContext.setTransform(number scaleX, number skewX, number skewY, number scaleY, number translateX, number translateY)

将一个新的子路径的起始点移动到指定点,不创建线条。绘制线条请调用 CanvasContext.stroke 方法。

CanvasContext.moveTo(number x, number y)

将一个新的子路径的起始点移动到指定点,不创建线条。绘制线条请调用 CanvasContext.stroke 方法。

CanvasContext.rect(number x, number y, number width, number height)

创建一个矩形路径。需要用 CanvasContext.fill 或者 CanvasContext.stroke 方法将矩形真正的画到 canvas 中。

CanvasContext.arc(number x, number y, number r, number sAngle, number eAngle, boolean anticlockwise)

根据指定方向(默认顺时针)从起始点开始创建一条弧线。

CanvasContext.quadraticCurveTo(number cpx, number cpy, number x, number y)

创建二次贝塞尔曲线路径。需要 2 个点。 第一个点是控制点,第二个点是终点。 起始点是当前路径最新的点,创建二次贝赛尔曲线之前,可以使用 CanvasContext.moveTo 方法进行修改。

CanvasContext.bezierCurveTo(number cp1x, number cp1y, number cp2x, number cp2y, number x, number y)

创建三次方贝塞尔曲线路径。该方法需要三个点。 第一、第二个点是控制点,第三个点是结束点。起始点是当前路径的最后一个点,绘制贝赛尔曲线前,可以通过调用 CanvasContext.moveTo 进行修改。

CanvasContext.closePath()

关闭一个路径。会连接起点和终点。可调用 CanvasContext.fill 或者 CanvasContext.stroke 进行绘制。如果图形已经是封闭的或者只有一个点,那么此方法不会做任何操作。

点击纠错
评价此篇文档