跳转至

PersimmonM 画布

  • pm.createCanvasContext(id, this)

    创建画布绘图上下文(需要指定画布 ID)。

    参数 类型 描述
    ID String 画布 ID
    this Object 画布所在 Page 实例 this
var ctx = pm.createCanvasContext('Canvas1', this)
ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 75)
ctx.draw()
  • setFillStyle

    设置填充色。

    参数 类型 描述
    color String 填充色

    RGB 颜色: 如 'rgb(255, 0, 0)'

    RGBA 颜色:如 'rgba(255, 0, 0, 0.3)'

    16 进制颜色: 如 RGB 类型 '#FF0000', ARGB 类型 '#FFFF0000'

    预定义颜色名字不区分大小写: 如 'red', 'Red','RED'

    例子:

var ctx = pm.createCanvasContext('Canvas1', this)
ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 75)
ctx.draw()
  • setStrokeStyle

    设置边框颜色。

    参数 类型 描述
    color String 填充色

    RGB 颜色: 如 'rgb(255, 0, 0)'

    RGBA 颜色:如 'rgba(255, 0, 0, 0.3)'

    16 进制颜色: 如 RGB 类型 '#FF0000', ARGB 类型 '#FFFF0000'

    预定义颜色名字不区分大小写: 如 'red', 'Red','RED'

    例子:

var ctx = pm.createCanvasContext('Canvas1', this)
ctx.setStrokeStyle('red')
ctx.strokeRect(10, 10, 150, 75)
ctx.draw()
  • createLinearGradient

    创建一个线性的渐变颜色。

    注:需要使用 addColorStop() 来指定渐变点,至少要两个。

    参数 类型 描述
    x0 Number 起点的x坐标
    y0 Number 起点的y坐标
    x1 Number 终点的x坐标
    y1 Number 终点的y坐标

    例子:

var ctx = pm.createCanvasContext('Canvas1', this)

// Create linear gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0)
grd.addColorStop(0, 'red')
grd.addColorStop(1, 'white')

// Fill with gradient
ctx.setFillStyle(grd)
ctx.fillRect(10, 10, 150, 80)
ctx.draw()
  • createCircularGradient

    创建一个圆形或圆环形的渐变颜色。

    注:需要使用 addColorStop() 来指定渐变点,至少要两个。

    参数 类型 描述
    x0 Number 内圆圆心的x坐标
    y0 Number 内圆圆心的y坐标
    r0 Number 内圆半径
    x1 Number 外圆圆心的x坐标
    y1 Number 外圆圆心的y坐标
    r1 Number 外圆半径

    例子:

var ctx = pm.createCanvasContext('Canvas1', this)

// Create circular gradient
var grd = ctx.createCircularGradient(110, 110, 80)
grd.addColorStop(0, 'red')
grd.addColorStop(1, 'white')

// Fill with gradient
ctx.setFillStyle(grd)
ctx.fillRect(10, 10, 200, 200)

// Create circular gradient
var grd = ctx.createCircularGradient(350, 110, 40, 350, 110, 80)
grd.addColorStop(0, 'red')
grd.addColorStop(1, 'white')

// Fill with gradient
ctx.setFillStyle(grd)
ctx.fillRect(250, 10, 200, 200)

ctx.draw()
  • addColorStop

    创建一个颜色的渐变点。

    参数 类型 描述
    stop Number(0-1) 表示渐变点在起点和终点中的位置
    color String 渐变点的颜色

    RGB 颜色: 如 'rgb(255, 0, 0)'

    RGBA 颜色:如 'rgba(255, 0, 0, 0.3)'

    16 进制颜色: 如 RGB 类型 '#FF0000', ARGB 类型 '#FFFF0000'

    预定义颜色名字不区分大小写: 如 'red', 'Red'

    例子:

var ctx = pm.createCanvasContext('Canvas1', this)

// Create circular gradient
var grd = ctx.createLinearGradient(30, 10, 120, 10)
grd.addColorStop(0, 'red')
grd.addColorStop(0.16, 'orange')
grd.addColorStop(0.33, 'yellow')
grd.addColorStop(0.5, 'green')
grd.addColorStop(0.66, 'cyan')
grd.addColorStop(0.83, 'blue')
grd.addColorStop(1, 'purple')

// Fill with gradient
ctx.setFillStyle(grd)
ctx.fillRect(10, 10, 150, 80)
ctx.draw()
  • setLineWidth

    设置线条的宽度。

    参数 类型 描述
    lineWidth Number 线条的宽度

    例子:

var ctx = pm.createCanvasContext('Canvas1', this)

ctx.beginPath()
ctx.moveTo(10, 10)
ctx.lineTo(150, 10)
ctx.stroke()

ctx.beginPath()
ctx.setLineWidth(5)
ctx.moveTo(10, 30)
ctx.lineTo(150, 30)
ctx.stroke()

ctx.beginPath()
ctx.setLineWidth(10)
ctx.moveTo(10, 50)
ctx.lineTo(150, 50)
ctx.stroke()

ctx.beginPath()
ctx.setLineWidth(15)
ctx.moveTo(10, 70)
ctx.lineTo(150, 70)
ctx.stroke()

ctx.draw()
  • setLineCap

    设置线条的端点样式。

    参数 类型 描述
    lineCap String 线条的结束端点样式,'butt'、'round'、'square'

    例子:

var ctx = pm.createCanvasContext('Canvas1', this)

ctx.beginPath()
ctx.moveTo(10, 10)
ctx.lineTo(150, 10)
ctx.stroke()

ctx.beginPath()
ctx.setLineCap('butt')
ctx.setLineWidth(10)
ctx.moveTo(10, 30)
ctx.lineTo(150, 30)
ctx.stroke()

ctx.beginPath()
ctx.setLineCap('round')
ctx.setLineWidth(10)
ctx.moveTo(10, 50)
ctx.lineTo(150, 50)
ctx.stroke()

ctx.beginPath()
ctx.setLineCap('square')
ctx.setLineWidth(10)
ctx.moveTo(10, 70)
ctx.lineTo(150, 70)
ctx.stroke()

ctx.draw()
  • setLineJoin

    设置线条的交点样式。

    参数 类型 描述
    lineJoin String 线条的结束交点样式,'bevel'、'round'、'miter'

    例子:

var ctx = pm.createCanvasContext('Canvas1', this)

ctx.beginPath()
ctx.moveTo(10, 10)
ctx.lineTo(100, 50)
ctx.lineTo(10, 90)
ctx.stroke()

ctx.beginPath()
ctx.setLineJoin('bevel')
ctx.setLineWidth(10)
ctx.moveTo(50, 10)
ctx.lineTo(140, 50)
ctx.lineTo(50, 90)
ctx.stroke()

ctx.beginPath()
ctx.setLineJoin('round')
ctx.setLineWidth(10)
ctx.moveTo(90, 10)
ctx.lineTo(180, 50)
ctx.lineTo(90, 90)
ctx.stroke()

ctx.beginPath()
ctx.setLineJoin('miter')
ctx.setLineWidth(10)
ctx.moveTo(130, 10)
ctx.lineTo(220, 50)
ctx.lineTo(130, 90)
ctx.stroke()

ctx.draw()
  • setLineDash

    设置线条的虚线样式。

    参数 类型 描述
    pattern Array 一组描述交替绘制线段和间距(坐标空间单位)长度的数字
    offset Number 虚线偏移量

    例子:

var ctx = pm.createCanvasContext('Canvas1', this)

ctx.setLineDash([10, 20], 5);

ctx.beginPath();
ctx.moveTo(0,100);
ctx.lineTo(400, 100);
ctx.stroke();

ctx.draw()
  • setMiterLimit

    设置最大斜接长度,斜接长度指的是在两条线交汇处内角和外角之间的距离。

    参数 类型 描述
    limit Number 最大斜接长度

    例子:

var ctx = pm.createCanvasContext('Canvas1', this)

ctx.beginPath()
ctx.setLineWidth(10)
ctx.setLineJoin('miter')
ctx.setMiterLimit(1)
ctx.moveTo(10, 10)
ctx.lineTo(100, 50)
ctx.lineTo(10, 90)
ctx.stroke()

ctx.beginPath()
ctx.setLineWidth(10)
ctx.setLineJoin('miter')
ctx.setMiterLimit(2)
ctx.moveTo(50, 10)
ctx.lineTo(140, 50)
ctx.lineTo(50, 90)
ctx.stroke()

ctx.beginPath()
ctx.setLineWidth(10)
ctx.setLineJoin('miter')
ctx.setMiterLimit(3)
ctx.moveTo(90, 10)
ctx.lineTo(180, 50)
ctx.lineTo(90, 90)
ctx.stroke()

ctx.beginPath()
ctx.setLineWidth(10)
ctx.setLineJoin('miter')
ctx.setMiterLimit(4)
ctx.moveTo(130, 10)
ctx.lineTo(220, 50)
ctx.lineTo(130, 90)
ctx.stroke()

ctx.draw()
  • rect

    创建一个矩形。用 fill() 或者 stroke() 方法将矩形真正的画到 canvas 中。

    参数 类型 描述
    x Number 矩形左上角的x坐标
    y Number 矩形左上角的y坐标
    width Number 矩形的宽度
    height Number 矩形的高度

    例子:

var ctx = pm.createCanvasContext('Canvas1', this)

ctx.rect(10, 10, 150, 75)
ctx.setFillStyle('red')
ctx.fill()
ctx.draw()
  • fillRect

    填充一个矩形。用 setFillStyle() 设置矩形的填充色,如果没设置默认是黑色。

    参数 类型 描述
    x Number 矩形左上角的x坐标
    y Number 矩形左上角的y坐标
    width Number 矩形的宽度
    height Number 矩形的高度

    例子:

var ctx = pm.createCanvasContext('Canvas1', this)

ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 75)
ctx.draw()
  • strokeRect

    画一个矩形(非填充)。用 setFillStroke() 设置矩形线条的颜色,如果没设置默认是黑色。

    参数 类型 描述
    x Number 矩形左上角的x坐标
    y Number 矩形左上角的y坐标
    width Number 矩形的宽度
    height Number 矩形的高度

    例子:

var ctx = pm.createCanvasContext('Canvas1', this)

ctx.setStrokeStyle('red')
ctx.strokeRect(10, 10, 150, 75)
ctx.draw()
  • clearRect

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

    参数 类型 描述
    x Number 矩形左上角的x坐标
    y Number 矩形左上角的y坐标
    width Number 矩形的宽度
    height Number 矩形的高度

    例子:

var ctx = pm.createCanvasContext('Canvas1', this)

ctx.setFillStyle('red')
ctx.fillRect(0, 0, 150, 200)
ctx.setFillStyle('blue')
ctx.fillRect(150, 0, 150, 200)
ctx.clearRect(10, 10, 150, 75)
ctx.draw()
  • fill

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

    注: 如果当前路径没有闭合,fill() 方法会将起点和终点进行连接,然后填充,详情见例一。

    注: fill() 填充的的路径是从 beginPath() 开始计算,但是不会将 fillRect() 包含进去,详情见例二。

    例子:

var ctx = pm.createCanvasContext('Canvas1', this)

ctx.moveTo(10, 10)
ctx.lineTo(100, 10)
ctx.lineTo(100, 100)
ctx.fill()
ctx.draw()
var ctx = pm.createCanvasContext('Canvas1', this)

// begin path
ctx.rect(10, 10, 100, 30)
ctx.setFillStyle('yellow')
ctx.fill()

// begin another path
ctx.beginPath()
ctx.rect(10, 40, 100, 30)

// only fill this rect, not in current path
ctx.setFillStyle('blue')
ctx.fillRect(10, 70, 100, 30)

ctx.rect(10, 100, 100, 30)

// it will fill current path
ctx.setFillStyle('red')
ctx.fill()
ctx.draw()
  • stroke

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

    注: stroke() 描绘的的路径是从 beginPath() 开始计算,但是不会将 strokeRect() 包含进去,详情见例二。

    例子:

var ctx = pm.createCanvasContext('Canvas1', this)

ctx.moveTo(10, 10)
ctx.lineTo(100, 10)
ctx.lineTo(100, 100)
ctx.stroke()
ctx.draw()
var ctx = pm.createCanvasContext('Canvas1', this)

// begin path
ctx.rect(10, 10, 100, 30)
ctx.setStrokeStyle('yellow')
ctx.stroke()

// begin another path
ctx.beginPath()
ctx.rect(10, 40, 100, 30)

// only stoke this rect, not in current path
ctx.setStrokeStyle('blue')
ctx.strokeRect(10, 70, 100, 30)

ctx.rect(10, 100, 100, 30)

// it will stroke current path
ctx.setStrokeStyle('red')
ctx.stroke()
ctx.draw()
  • beginPath

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

    注: 在最开始的时候相当于调用了一次 beginPath()。

    注: 同一个路径内的多次setFillStyle()、setStrokeStyle()、setLineWidth()等设置,以最后一次设置为准。

    例子:

var ctx = pm.createCanvasContext('Canvas1', this)

// begin path
ctx.rect(10, 10, 100, 30)
ctx.setFillStyle('yellow')
ctx.fill()

// begin another path
ctx.beginPath()
ctx.rect(10, 40, 100, 30)

// only fill this rect, not in current path
ctx.setFillStyle('blue')
ctx.fillRect(10, 70, 100, 30)

ctx.rect(10, 100, 100, 30)

// it will fill current path
ctx.setFillStyle('red')
ctx.fill()
ctx.draw()
  • closePath

    关闭一个路径。

    注: 关闭路径会连接起点和终点。

    注: 如果关闭路径后没有调用 fill() 或者 stroke() 并开启了新的路径,那之前的路径将不会被渲染。

    例子:

var ctx = pm.createCanvasContext('Canvas1', this)

ctx.moveTo(10, 10)
ctx.lineTo(100, 10)
ctx.lineTo(100, 100)
ctx.closePath()
ctx.stroke()
ctx.draw()
var ctx = pm.createCanvasContext('Canvas1', this)

// begin path
ctx.rect(10, 10, 100, 30)
ctx.closePath()

// begin another path
ctx.beginPath()
ctx.rect(10, 40, 100, 30)

// only fill this rect, not in current path
ctx.setFillStyle('blue')
ctx.fillRect(10, 70, 100, 30)

ctx.rect(10, 100, 100, 30)

// it will fill current path
ctx.setFillStyle('red')
ctx.fill()

ctx.draw()
  • moveTo

    把路径移动到画布中的指定点,不创建线条。

    参数 类型 描述
    x Number 指定点的x坐标
    y Number 指定点的y坐标

    例子:

var ctx = pm.createCanvasContext('Canvas1', this)

ctx.moveTo(10, 10)
ctx.lineTo(100, 10)

ctx.moveTo(10, 50)
ctx.lineTo(100, 50)
ctx.stroke()
ctx.draw()
  • lineTo

    增加一个新点,然后创建一条从上次指定点到目标点的线。

    参数 类型 描述
    x Number 指定点的x坐标
    y Number 指定点的y坐标

    例子:

var ctx = pm.createCanvasContext('Canvas1', this)

ctx.moveTo(10, 10)
ctx.rect(10, 10, 100, 50)
ctx.lineTo(110, 60)
ctx.stroke()
ctx.draw()
  • arc

    画一条弧线。

    参数 类型 描述
    x Number 圆心x坐标
    y Number 圆心y坐标
    r Number 圆的半径
    sAngle Number 起始弧度,单位弧度(在3点钟方向)
    eAngle Number 终止弧度
    counterclockwise Boolean 可选。指定弧度的方向是逆时针还是顺时针。默认是false,即顺时针。

    例子:

var ctx = pm.createCanvasContext('Canvas1', this)

// Draw coordinates
ctx.arc(100, 75, 50, 0, 2 * Math.PI)
ctx.setFillStyle('#EEEEEE')
ctx.fill()

ctx.beginPath()
ctx.moveTo(40, 75)
ctx.lineTo(160, 75)
ctx.moveTo(100, 15)
ctx.lineTo(100, 135)
ctx.setStrokeStyle('#AAAAAA')
ctx.stroke()

ctx.setFontSize(12)
ctx.setFillStyle('black')
ctx.fillText('0', 165, 78)
ctx.fillText('0.5*PI', 83, 145)
ctx.fillText('1*PI', 15, 78)
ctx.fillText('1.5*PI', 83, 10)

// Draw points
ctx.beginPath()
ctx.arc(100, 75, 2, 0, 2 * Math.PI)
ctx.setFillStyle('lightgreen')
ctx.fill()

ctx.beginPath()
ctx.arc(100, 25, 2, 0, 2 * Math.PI)
ctx.setFillStyle('blue')
ctx.fill()

ctx.beginPath()
ctx.arc(150, 75, 2, 0, 2 * Math.PI)
ctx.setFillStyle('red')
ctx.fill()

// Draw arc
ctx.beginPath()
ctx.arc(100, 75, 50, 0, 1.5 * Math.PI)
ctx.setStrokeStyle('#333333')
ctx.stroke()

ctx.draw()
  • bezierCurveTo

    创建三次方贝塞尔曲线路径。

    参数 类型 描述
    cp1x Number 第一个贝塞尔控制点的 x 坐标
    cp1y Number 第一个贝塞尔控制点的 y 坐标
    cp2x Number 第二个贝塞尔控制点的 x 坐标
    cp2y Number 第二个贝塞尔控制点的 y 坐标
    x Number 结束点的 x 坐标
    y Number 结束点的 y 坐标

    例子:

var ctx = pm.createCanvasContext('Canvas1', this)

// Draw points
ctx.beginPath()
ctx.arc(20, 20, 2, 0, 2 * Math.PI)
ctx.setFillStyle('red')
ctx.fill()

ctx.beginPath()
ctx.arc(200, 20, 2, 0, 2 * Math.PI)
ctx.setFillStyle('lightgreen')
ctx.fill()

ctx.beginPath()
ctx.arc(20, 100, 2, 0, 2 * Math.PI)
ctx.arc(200, 100, 2, 0, 2 * Math.PI)
ctx.setFillStyle('blue')
ctx.fill()

ctx.setFillStyle('black')
ctx.setFontSize(12)

// Draw guides
ctx.beginPath()
ctx.moveTo(20, 20)
ctx.lineTo(20, 100)
ctx.lineTo(150, 75)

ctx.moveTo(200, 20)
ctx.lineTo(200, 100)
ctx.lineTo(70, 75)
ctx.setStrokeStyle('#AAAAAA')
ctx.stroke()

// Draw quadratic curve
ctx.beginPath()
ctx.moveTo(20, 20)
ctx.bezierCurveTo(20, 100, 200, 100, 200, 20)
ctx.setStrokeStyle('black')
ctx.stroke()

ctx.draw()
  • quadraticCurveTo

    创建二次贝塞尔曲线路径。

    参数 类型 描述
    cp1x Number 贝塞尔控制点的 x 坐标
    cp1y Number 贝塞尔控制点的 y 坐标
    x Number 结束点的 x 坐标
    y Number 结束点的 y 坐标

    例子:

var ctx = pm.createCanvasContext('Canvas1', this)

// Draw points
ctx.beginPath()
ctx.arc(20, 20, 2, 0, 2 * Math.PI)
ctx.setFillStyle('red')
ctx.fill()

ctx.beginPath()
ctx.arc(200, 20, 2, 0, 2 * Math.PI)
ctx.setFillStyle('lightgreen')
ctx.fill()

ctx.beginPath()
ctx.arc(20, 100, 2, 0, 2 * Math.PI)
ctx.setFillStyle('blue')
ctx.fill()

ctx.setFillStyle('black')
ctx.setFontSize(12)

    // Draw guides
ctx.beginPath()
ctx.moveTo(20, 20)
ctx.lineTo(20, 100)
ctx.lineTo(200, 20)
ctx.setStrokeStyle('#AAAAAA')
ctx.stroke()

    // Draw quadratic curve
ctx.beginPath()
ctx.moveTo(20, 20)
ctx.quadraticCurveTo(20, 100, 200, 20)
ctx.setStrokeStyle('black')
ctx.stroke()

ctx.draw()
  • scale

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

    参数 类型 描述
    scaleWidth Number 横坐标缩放的倍数 (1 = 100%,0.5 = 50%,2 = 200%)
    scaleHeight Number 纵坐标轴缩放的倍数 (1 = 100%,0.5 = 50%,2 = 200%)

    例子:

var ctx = pm.createCanvasContext('Canvas1', this)

ctx.strokeRect(10, 10, 25, 15)
ctx.scale(2, 2)
ctx.strokeRect(10, 10, 25, 15)
ctx.scale(2, 2)
ctx.strokeRect(10, 10, 25, 15)

ctx.draw()
  • rotate

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

    参数 类型 描述
    rotate Number 旋转角度,以弧度计(degrees * Math.PI/180;degrees范围为0~360)

    例子:

var ctx = pm.createCanvasContext('Canvas1', this)

ctx.strokeRect(100, 10, 150, 100)
ctx.rotate(20 * Math.PI / 180)
ctx.strokeRect(100, 10, 150, 100)
ctx.rotate(20 * Math.PI / 180)
ctx.strokeRect(100, 10, 150, 100)

ctx.draw()
  • translate

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

    参数 类型 描述
    x Number 水平坐标平移量
    y Number 竖直坐标平移量

    例子:

var ctx = pm.createCanvasContext('Canvas1', this)

ctx.strokeRect(10, 10, 150, 100)
ctx.translate(20, 20)
ctx.strokeRect(10, 10, 150, 100)
ctx.translate(20, 20)
ctx.strokeRect(10, 10, 150, 100)

ctx.draw()
  • clip

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

    例子:

var ctx = pm.createCanvasContext('Canvas1', this)

ctx.save()
ctx.beginPath()
ctx.arc(50, 50, 25, 0, 2*Math.PI)
ctx.clip()
ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 75)
ctx.restore()
ctx.draw()
  • setFontSize

    设置字体的字号。

    参数 类型 描述
    fontSize Number 字体字号

    例子:

var ctx = pm.createCanvasContext('Canvas1', this)

ctx.setFontSize(20)
ctx.fillText('20', 20, 20)
ctx.setFontSize(30)
ctx.fillText('30', 40, 40)
ctx.setFontSize(40)
ctx.fillText('40', 60, 60)
ctx.setFontSize(50)
ctx.fillText('50', 90, 90)

ctx.draw()
  • fillText

    在画布上绘制被填充的文本。

    参数 类型 描述
    text String 在画布上输出的文本
    x Number 绘制文本的左上角x坐标位置
    y Number 绘制文本的左上角y坐标位置
    maxWidth Number 需要绘制的最大宽度,可选

    例子:

var ctx = pm.createCanvasContext('Canvas1', this)

ctx.setFontSize(20)
ctx.fillText('Hello', 20, 20)
ctx.fillText('MINA', 100, 100)

ctx.draw()
  • setTextAlign

    用于设置文字的对齐。

    参数 类型 描述
    align String 可选值 'left'、'center'、'right'

    例子:

var ctx = pm.createCanvasContext('Canvas1', this)

ctx.setStrokeStyle('red')
ctx.moveTo(150, 20)
ctx.lineTo(150, 170)
ctx.stroke()

ctx.setFontSize(15)
ctx.setTextAlign('left')
ctx.fillText('textAlign=left', 150, 60)

ctx.setTextAlign('center')
ctx.fillText('textAlign=center', 150, 80)

ctx.setTextAlign('right')
ctx.fillText('textAlign=right', 150, 100)

ctx.draw()
  • setTextBaseline

    用于设置文字的水平对齐

    参数 类型 描述
    textBaseline String 可选值 'top'、'bottom'、'middle'、'normal'

    例子:

var ctx = pm.createCanvasContext('Canvas1', this)

ctx.setStrokeStyle('red')
ctx.moveTo(5, 75)
ctx.lineTo(295, 75)
ctx.stroke()

ctx.setFontSize(20)

ctx.setTextBaseline('top')
ctx.fillText('top', 5, 75)

ctx.setTextBaseline('middle')
ctx.fillText('middle', 50, 75)

ctx.setTextBaseline('bottom')
ctx.fillText('bottom', 120, 75)

ctx.setTextBaseline('normal')
ctx.fillText('normal', 200, 75)

ctx.draw()
  • drawImage

    绘制图像到画布。

    参数 类型 描述
    imageResource String 所要绘制的图片资源
    dx Number 图像的左上角在目标canvas上 X 轴的位置
    dy Number 图像的左上角在目标canvas上 Y 轴的位置
    dWidth Number 在目标画布上绘制图像的宽度,允许对绘制的图像进行缩放
    dHeigt Number 在目标画布上绘制图像的高度,允许对绘制的图像进行缩放
    sx Number 源图像的矩形选择框的左上角 X 坐标
    sy Number 源图像的矩形选择框的左上角 Y 坐标
    sWidth Number 源图像的矩形选择框的高度
    sHeight Number 源图像的矩形选择框的高度

    例子:

var ctx = pm.createCanvasContext('Canvas1', this)

ctx.drawImage('demo.png', 0, 0, 150, 100)
ctx.draw()

ctx.draw()
  • setGlobalAlpha

    设置全局画笔透明度。

    参数 类型 描述
    alpha Number 透明度(0~1),0 表示完全透明,1 表示完全不透明

    例子:

var ctx = pm.createCanvasContext('Canvas1', this)

ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 100)
ctx.setGlobalAlpha(0.2)
ctx.setFillStyle('blue')
ctx.fillRect(50, 50, 150, 100)
ctx.setFillStyle('yellow')
ctx.fillRect(100, 100, 150, 100)

ctx.draw()
  • save

    保存当前的绘图上下文。

  • restore

    恢复之前保存的绘图上下文。

    例子:

var ctx = pm.createCanvasContext('Canvas1', this)

    // save the default fill style
ctx.save() 
ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 100)

    // restore to the previous saved state
ctx.restore()
ctx.fillRect(50, 50, 150, 100)

ctx.draw()
  • draw

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

    例子:

var ctx = pm.createCanvasContext('Canvas1', this)

ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 100)
ctx.draw()

评论