CanvasContext
canvas 老方案组件的上下文(即不指定 type 属性)。可以用来控制如何在画布中绘制。
方法
context.draw(boolean reserve, function callback)
绘图。
参数
- reserve，表示本次绘制前是否清空画布。默认为 false
- callback，是绘制成功回调。
context.beginPath()
开始创建一个路径。需要调用 fill 或者 stroke 才会使用路径进行填充或描边。
参数
无
context.clip()
将当前创建的路径设置为当前剪切路径。
参数
无
context.lineTo(number x, number y)
lineTo 方法增加一个新点，然后创建一条从上次指定点到目标点的线。
参数
- x, 目标位置的 x 坐标
- y, 目标位置的 y 坐标
context.setFontSize(number fontSize)
设置字体的字号
参数
- fontSize 字体的字号
context.setFillStyle(string | CanvasGradient color)
设置填充色
参数
- color，填充的颜色
context.createLinearGradient(number x0, number y0, number x1, number y1)
创建一个线性的渐变颜色。返回的 CanvasGradient 对象需要使用 CanvasGradient.addColorStop() 来指定渐变点，至少要两个。
参数
- x0，起点的 x 坐标
- y0，起点的 y 坐标
- x1，起点的 x 坐标
- y1，起点的 y 坐标
context.setStrokeStyle(string | CanvasGradient color)
设置描边颜色。
参数
- color，描边的颜色
context.setGlobalAlpha(number alpha)
设置全局画笔透明度。
参数
- alpha，透明度。范围 0-1，0 表示完全透明，1 表示完全不透明。
context.setShadow(number x, number y, number blur, string color)
设定阴影样式。
参数
- x，阴影相对于形状在水平方向的偏移
- y，阴影相对于形状在竖直方向的偏移
- blur，阴影的模糊级别，范围 0-100，数值越大越模糊
- color，阴影的颜色。默认为 black
context.setLineDash(Array pattern, number offset)
设置虚线样式
参数
- pattern，数组类型，一组描述交替绘制线段和间距长度的数字
- offset，虚线偏移量
context.fill()
对当前路径中的内容进行填充。
参数
无
context.stroke()
画出当前路径的边框。
参数
无
context.fillRect(number x, number y, number w, number h)
填充一个矩形。用 ==setFillStyle== 设置矩形的填充色，如果没设置默认是黑色。
参数
- x，矩形路径左上角的横坐标
- y，矩形路径左上角的纵坐标
- w，矩形区域的宽度
- h，矩形区域的高度
context.strokeRect(number x, number y, number w, number h)
画一个矩形(非填充)。用 ==setStrokeStyle== 设置矩形线条的颜色，如果没设置默认是黑色。
参数
- x，矩形路径左上角的横坐标
- y，矩形路径左上角的纵坐标
- w，矩形区域的宽度
- h，矩形区域的高度
context.drawImage(string src, number sx, number sy, number sw, number sh, number dx, number dy, number dw, number dh)
绘制图像到画布
参数
- src，所要绘制的图片资源（网络图片要通过 ==getImageInfo== / ==downloadFile== 先下载）
- sx，需要绘制到画布中的，==src==图片的矩形（裁剪）选择框的左上角 x 坐标
- sy，需要绘制到画布中的，==src==图片的矩形（裁剪）选择框的左上角 y 坐标
- sw，需要绘制到画布中的，==src==图片的矩形（裁剪）选择框的宽度
- sh，需要绘制到画布中的，==src==图片的矩形（裁剪）选择框的高度
- dx，==src==图片的左上角在目标 canvas 上 x 轴的位置
- dy，==src==图片的左上角在目标 canvas 上 y 轴的位置
- dw，在目标画布上绘制==src==图片的宽度，允许对绘制的图片进行缩放
- dh，在目标画布上绘制==src==图片的高度，允许对绘制的图片进行缩放
context.measureText(string text)
测量文本尺寸信息。目前仅返回文本宽度。
参数
要测量的文本
context.scale(number sw, number sh)
在调用后，之后创建的路径其横纵坐标会被缩放。多次调用倍数会相乘。
参数
- sw，横坐标缩放的倍数，1 = 100%， 0.5 = 50%
- sh，纵坐标缩放的倍数，1 = 100%， 0.5 = 50%
context.rotate(number r)
以原点为中心顺时针旋转当前坐标轴。多次调用旋转的角度会叠加。原点可以用 ==translate== 方法修改。
参数
- r，旋转角度，以弧度计 degrees * Math.PI/180；degrees 范围为 0-360
context.translate(number x, number y)
对当前坐标系的原点 (0, 0) 进行平移。
参数
- x，水平坐标平移量
- y，竖直坐标平移量
context.save()
保存绘图上下文。
参数
无
context.restore()
恢复之前保存的绘图上下文。
参数
无
context.clearRect(number x, number y, number width, number height)
清除画布上在该矩形区域内的内容。
参数
- x，矩形左上角的横坐标
- y，矩形左上角的纵坐标
- w，矩形的宽度
- h，矩形的高度
context.fillText(string text, number x, number y, number maxWidth)
在画布上填充一段文本
参数
- text，在画布上绘制的文本
- x，绘制文本左上角的横坐标
- y，绘制文本左上角的纵坐标
- maxWidth，可绘制的最大宽度
context.setTextAlign(string align)
设置文字的对齐
参数
- align，对齐方式，只能为==left==、==center==、==right==
context.setLineCap(string lineCap)
设置线条的端点样式
参数
- lineCap，端点样式，只能为==butt==、==round==、==square==
context.setLineJoin(string lineJoin)
设置线条的交点样式
参数
- lineJoin，线条的结束交点样式，只能为==bevel==、==round==、==miter==
context.setLineWidth(number lineWidth)
设置线条的宽度
参数
- lineWidth，线条的宽度，单位 px
context.setMiterLimit(number miterLimit)
设置最大斜接长度。斜接长度指的是在两条线交汇处内角和外角之间的距离。当 ==CanvasContext.setLineJoin()== 为 miter 时才有效。超过最大倾斜长度的，连接处将以 lineJoin 为 bevel 来显示。
参数
- 最大斜接长度
context.setTextBaseline(string textBaseline)
设置文字的竖直对齐
参数
- textBaseline，文字的竖直对齐方式，只能为==top==、==bottom==、==middle==、==normal==
context.transform(number scaleX, number skewX, number skewY, number scaleY, number translateX, number translateY)
使用矩阵多次叠加当前变换的方法
参数
- scaleX，水平缩放
- skewX，水平倾斜
- skewY，竖直倾斜
- scaleY，竖直缩放
context.setTransform(number scaleX, number skewX, number skewY, number scaleY, number translateX, number translateY)
使用矩阵重新设置（覆盖）当前变换的方法
参数
- scaleX，水平缩放
- skewX，水平倾斜
- skewY，竖直倾斜
- scaleY，竖直缩放
context.moveTo(number x, number y)
把路径移动到画布中的指定点，不创建线条。用 ==stroke== 方法来画线条。
参数
- x，目标点的横坐标
- y，目标点的纵坐标
context.rect(number x, number y, number width, number height)
创建一个矩形路径。需要用 fill 或者 stroke 方法将矩形显示在画布上。
参数
- x，矩形左上角的横坐标
- y，矩形左上角的纵坐标
- width，矩形的宽度
- height，矩形的高度
context.arc(number x, number y, number r, number sAngle, number eAngle, boolean counterclockwise)
创建一条弧线。需用用 stroke 或 fill 方法将弧线显示在画布上。
参数
- x，圆心的 x 坐标
- y，圆心的 y 坐标
- r，圆的半径
- sAngle，起始弧度
- eAngle，终止弧度
- counterclockwise，弧度的方向是否是逆时针
context.quadraticCurveTo(number cpx, number cpy, number x, number y)
创建二次贝塞尔曲线路径。曲线的起始点为路径中前一个点。
参数
- cpx，贝塞尔控制点的 x 坐标
- cpy，贝塞尔控制点的 y 坐标
- x，结束点的 x 坐标
- y，结束点的 y 坐标
context.bezierCurveTo(number cp1x, number cp1y, number cp2x, number cp2y, number x, number y)
创建三次方贝塞尔曲线路径。曲线的起始点为路径中前一个点。
参数
- cp1x，第一个贝塞尔控制点的 x 坐标
- cp1y，第一个贝塞尔控制点的 y 坐标
- cp2x，第二个贝塞尔控制点的 x 坐标
- cp2y，第二个贝塞尔控制点的 y 坐标
- x，结束点的 x 坐标
- y，结束点的 y 坐标
context.closePath()
关闭一个路径。会连接起点和终点。如果关闭路径后没有调用 fill 或者 stroke 并开启了新的路径，那之前的路径将不会被渲染。
参数
无