开发
API

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 并开启了新的路径,那之前的路径将不会被渲染。

参数

点击纠错
评价此篇文档