微信小程序开发 – 第 28 页 – 微信小程序开发指南

CanvasContext.moveTo(number x, number y)

CanvasContext 是旧版的接口，新版 Canvas 2D 接口与 Web 一致

从基础库 2.9.0 开始，本接口停止维护，请使用 RenderingContext 代替

微信小程序插件：支持

相关文档: 旧版画布迁移指南、canvas 组件介绍

功能描述

把路径移动到画布中的指定点，不创建线条。用 stroke 方法来画线条

参数

number x

目标位置的 x 坐标

number y

目标位置的 y 坐标

示例代码

const ctx = wx.createCanvasContext('myCanvas')
ctx.moveTo(10, 10)
ctx.lineTo(100, 10)

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

CanvasContext.measureText(string text)

CanvasContext 是旧版的接口，新版 Canvas 2D 接口与 Web 一致

从基础库 2.9.0 开始，本接口停止维护，请使用 RenderingContext 代替

基础库 1.9.90 开始支持，低版本需做兼容处理。

微信小程序插件：支持

相关文档: 旧版画布迁移指南、canvas 组件介绍

功能描述

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

参数

string text

要测量的文本

返回值

Object

属性	类型	说明
width	number	文本的宽度

示例代码


  const ctx = wx.createCanvasContext('myCanvas')
  ctx.font = 'italic bold 20px cursive'
  const metrics = ctx.measureText('Hello World')
  console.log(metrics.width)

CanvasContext.lineTo(number x, number y)

CanvasContext 是旧版的接口，新版 Canvas 2D 接口与 Web 一致

从基础库 2.9.0 开始，本接口停止维护，请使用 RenderingContext 代替

微信小程序插件：支持

相关文档: 旧版画布迁移指南、canvas 组件介绍

功能描述

增加一个新点，然后创建一条从上次指定点到目标点的线。用 stroke 方法来画线条

参数

number x

目标位置的 x 坐标

number y

目标位置的 y 坐标

示例代码

const ctx = wx.createCanvasContext('myCanvas')
ctx.moveTo(10, 10)
ctx.rect(10, 10, 100, 50)
ctx.lineTo(110, 60)
ctx.stroke()
ctx.draw()

CanvasContext.fillText

CanvasContext 是旧版的接口，新版 Canvas 2D 接口与 Web 一致

从基础库 2.9.0 开始，本接口停止维护，请使用 RenderingContext 代替

微信小程序插件：支持

相关文档: 旧版画布迁移指南、canvas 组件介绍

功能描述

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

参数

string text

在画布上输出的文本

number x

绘制文本的左上角 x 坐标位置

number y

绘制文本的左上角 y 坐标位置

number maxWidth

需要绘制的最大宽度，可选

示例代码

const ctx = wx.createCanvasContext('myCanvas')

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

ctx.draw()

CanvasContext.fillRect 方法

CanvasContext 是旧版的接口，新版 Canvas 2D 接口与 Web 一致

从基础库 2.9.0 开始，本接口停止维护，请使用 RenderingContext 代替

微信小程序插件：支持

相关文档: 旧版画布迁移指南、canvas 组件介绍

功能描述

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

参数

number x

矩形路径左上角的横坐标

number y

矩形路径左上角的纵坐标

number width

矩形路径的宽度

number height

矩形路径的高度

示例代码

const ctx = wx.createCanvasContext('myCanvas')
ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 75)
ctx.draw()

CanvasContext.fill()

CanvasContext 是旧版的接口，新版 Canvas 2D 接口与 Web 一致

从基础库 2.9.0 开始，本接口停止维护，请使用 RenderingContext 代替

微信小程序插件：支持

相关文档: 旧版画布迁移指南、canvas 组件介绍

功能描述

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

示例代码

如果当前路径没有闭合，fill() 方法会将起点和终点进行连接，然后填充。

const ctx = wx.createCanvasContext('myCanvas')
ctx.moveTo(10, 10)
ctx.lineTo(100, 10)
ctx.lineTo(100, 100)
ctx.fill()
ctx.draw()

fill() 填充的的路径是从 beginPath() 开始计算，但是不会将 fillRect() 包含进去。

const ctx = wx.createCanvasContext('myCanvas')
// 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()

CanvasContext.drawImage(string imageResource, number sx, number sy, number sWidth, number sHeight, number dx, number dy, number dWidth, number dHeight)

CanvasContext 是旧版的接口，新版 Canvas 2D 接口与 Web 一致

从基础库 2.9.0 开始，本接口停止维护，请使用 RenderingContext 代替

微信小程序插件：支持

相关文档: 旧版画布迁移指南、canvas 组件介绍

功能描述

绘制图像到画布

参数

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进行缩放

示例代码

有三个版本的写法：

drawImage(imageResource, dx, dy)
drawImage(imageResource, dx, dy, dWidth, dHeight)
drawImage(imageResource, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 从 1.9.0 起支持

const ctx = wx.createCanvasContext('myCanvas')

wx.chooseImage({
  success: function(res){
    ctx.drawImage(res.tempFilePaths[0], 0, 0, 150, 100)
    ctx.draw()
  }
})

CanvasContext.draw(boolean reserve, function callback)

CanvasContext 是旧版的接口，新版 Canvas 2D 接口与 Web 一致

从基础库 2.9.0 开始，本接口停止维护，请使用 RenderingContext 代替

微信小程序插件：支持

相关文档: 旧版画布迁移指南、canvas 组件介绍

功能描述

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

参数

boolean reserve

本次绘制是否接着上一次绘制。即 reserve 参数为 false，则在本次调用绘制之前 native 层会先清空画布再继续绘制；若 reserve 参数为 true，则保留当前画布上的内容，本次调用 drawCanvas 绘制的内容覆盖在上面，默认 false。

function callback

绘制完成后执行的回调函数

示例代码

第二次 draw() reserve 为 true。所以保留了上一次的绘制结果，在上下文设置的 fillStyle ‘red’ 也变成了默认的 ‘black’。

const ctx = wx.createCanvasContext('myCanvas')

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

示例代码

第二次 draw() reserve 为 false。所以没有保留了上一次的绘制结果和在上下文设置的 fillStyle ‘red’。

const ctx = wx.createCanvasContext('myCanvas')

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

CanvasContext.createPattern(string image, string repetition)

CanvasContext 是旧版的接口，新版 Canvas 2D 接口与 Web 一致

从基础库 2.9.0 开始，本接口停止维护，请使用 RenderingContext 代替

基础库 1.9.90 开始支持，低版本需做兼容处理。

微信小程序插件：支持

相关文档: 旧版画布迁移指南、canvas 组件介绍

功能描述

对指定的图像创建模式的方法，可在指定的方向上重复元图像

参数

string image

重复的图像源，支持代码包路径和本地临时路径 (本地路径)

string repetition

如何重复图像

repetition 的合法值

值	说明	最低版本
repeat	水平竖直方向都重复
repeat-x	水平方向重复
repeat-y	竖直方向重复
no-repeat	不重复

示例代码


    const ctx = wx.createCanvasContext('myCanvas')
    const pattern = ctx.createPattern('/path/to/image', 'repeat-x')
    ctx.fillStyle = pattern
    ctx.fillRect(0, 0, 300, 150)
    ctx.draw()

CanvasContext.createLinearGradient

CanvasContext 是旧版的接口，新版 Canvas 2D 接口与 Web 一致

从基础库 2.9.0 开始，本接口停止维护，请使用 RenderingContext 代替

微信小程序插件：支持

相关文档: 旧版画布迁移指南、canvas 组件介绍

功能描述

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

参数

number x0

起点的 x 坐标

number y0

起点的 y 坐标

number x1

终点的 x 坐标

number y1

终点的 y 坐标

返回值

CanvasGradient

示例代码

const ctx = wx.createCanvasContext('myCanvas')

// Create linear gradient
const 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()