画布 – 第 5 页 – 微信小程序开发指南

CanvasContext.rotate(number rotate)

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

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

微信小程序插件：支持

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

功能描述

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

参数

number rotate

旋转角度，以弧度计 degrees * Math.PI/180；degrees 范围为 0-360

示例代码

const ctx = wx.createCanvasContext('myCanvas')

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()

<img alt="" src="https://developers.weixin.qq.com/data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUYAAACrCAYAAAAaejUYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAABH3SURBVHhe7Z1Pkhw1E8VnBzuIYMNu2OEdBBew4QJ4CStYssM72Jkb4BswN8A34AgcgSNwhP6+10Z2Tbu6K6VSSqrUryImcDD6+/LpjSpTWbo78YAACIAACDxC4A48QAAEQAAEHiOAMMIIEAABELhAAGGEEiAAAiCAMMIBEAABELiNADtGGAICIAAC7BjhAAiAAAiwY4QDIAACIJCFAK/SWXBRGARAYAYEEMYZrMwcQQAEshAwC+Pd3d2JHzCAA3DgSBzIUsNF4SxhLO2EeiAAAiDQGgEJeOljrrmnk9LBUQ8EQAAEShHYo1kIYynq1AMBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAYRxaPMwOBAAgR6IIIw9UKdPEACBoRFAGIc2D4MDARDogQDC2AN1+gQBEBgaAY%0A

CanvasContext.restore()

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

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

微信小程序插件：支持

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

功能描述

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

示例代码

const ctx = wx.createCanvasContext('myCanvas')

// 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()

CanvasContext.rect 创建矩形路径

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

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

微信小程序插件：支持

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

功能描述

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

参数

number x

矩形路径左上角的横坐标

number y

矩形路径左上角的纵坐标

number width

矩形路径的宽度

number height

矩形路径的高度

示例代码

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

CanvasContext.quadraticCurveTo 创建二次贝塞尔曲线

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

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

微信小程序插件：支持

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

功能描述

创建二次贝塞尔曲线路径。曲线的起始点为路径中前一个点。

参数

number cpx

贝塞尔控制点的 x 坐标

number cpy

贝塞尔控制点的 y 坐标

number x

结束点的 x 坐标

number y

结束点的 y 坐标

示例代码

const ctx = wx.createCanvasContext('myCanvas')

// 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()

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()