开发者社区
社区提问意见反馈
开发者钉组织
扫描二维码
加入支付宝开发者钉组织
基础 api
基础
应用级事件
界面
导航栏
tabbar
路由
交互反馈
下拉刷新
联系人
选择城市
选择日期
动画
画布
canvas
canvasrenderingcontext2d
canvaspattern
offscreencanvas
旧版接口(停止更新)
地图
计算路径
键盘
滚动
节点查询
选项选择器
级联选择
设置窗口背景
设置页面是否支持下拉
字体
跳转
多媒体
缓存
文件
位置
网络
设备
worker
数据安全
分享
收藏
自定义通用菜单
更新管理
web-view组件控制
升级支付宝最新版本
隐私信息授权
小程序广告
开放能力 api
开发 > api > 基础 api > 界面 > 画布 > canvasrenderingcontext2d > canvasrenderingcontext2d.rotate
收藏
订阅更新
我的文档
设置

canvasrenderingcontext2d.rotate(number angle)

基础库  或更高版本; 若版本较低,建议采取 兼容处理

主体: 企业支付宝小程序个人支付宝小程序

旋转当前坐标轴。

旋转中心点为原点,可使用 canvasrenderingcontext2d.translate 方法修改原点位置。多次调用 rotate ,将在上次旋转结果的基础上再次旋转。

效果示例

代码示例运行效果

number angle

旋转的弧度。可以使用 旋转角度 * math.pi / 180 计算。旋转角度为正数将顺时针旋转,为负数将逆时针旋转。

代码示例
.js
.axml
page({
    oncanvasready() {
        my.createselectorquery().select('#canvas').node().exec((res) => {
            const canvas = res[0].node
            const ctx = canvas.getcontext('2d')
            ctx.strokerect(120, 20, 100, 50)
            // 顺时针旋转 60 度
            ctx.rotate(60 * math.pi / 180)
            ctx.strokerect(120, 20, 100, 50)
            
            // 逆时针旋转 30 度
            ctx