微信小程序canvas 画布旋转

微信小程序的Canvas API提供了一个`rotate()`方法，用于对当前绘制的图形进行旋转。这个函数接受一个角度作为参数，以弧度制计算。例如，如果你想将画布顺时针旋转45度，你可以这样做：

wx.createSelectorQuery()
.select('#your-canvas-id')
.fields({
  node: true,
})
.exec(function(res) {
  var canvas = res.node;
  var ctx = canvas.getContext('2d');
  ctx.save(); // 保存原始状态，防止后续操作影响旋转
  ctx.translate(canvas.width / 2, canvas.height / 2); // 将原点移动到画布中心，便于旋转
  ctx.rotate(Math.PI / 4); // 旋转45度
  // 现在可以在这个旋转后的坐标系下绘画
  ctx.moveTo(0, 0);
  ctx.lineTo(canvas.width, canvas.height);
  ctx.stroke(); // 绘制线条
  ctx.restore(); // 恢复到之前的状态
});

相关问题

微信小程序canvas 画布中心点旋转

微信小程序的Canvas API提供了一个`rotate()`方法，用于在画布上进行图形的旋转。如果你想旋转画布中心点，实际上Canvas是围绕其左上角进行旋转的。但在实际应用中，我们可以先确定需要旋转的图形的位置，然后相对于这个位置进行旋转。

例如，如果你有一个特定的圆形，你想让它绕着画布中心旋转，你需要做的是：

1. 首先获取圆形相对于画布中心的偏移量（x、y坐标）。
2. 使用`save()`保存当前状态，包括变换矩阵。
3. 设置新的旋转中心（通常设置为画布宽度和高度的一半，即画布的中心点）。
4. 调用`translate(x, y)`将坐标系移动到旋转中心。
5. 调用`rotate(angle)`进行旋转，其中angle是旋转的角度（单位通常是弧度）。
6. 绘制你的圆形。
7. 使用`restore()`恢复之前的状态。

下面是一个简化的伪代码示例：

let centerX = wx.canvas.currentContext.width / 2;
let centerY = wx.canvas.currentContext.height / 2;

// 获取圆心偏移
let circleOffsetX = ...;
let circleOffsetY = ...;

// 保存原始状态
wx.canvas.currentContext.save();

// 移动到旋转中心
wx.canvas.currentContext.translate(centerX, centerY);

// 旋转
wx.canvas.currentContext.rotate(angle);

// 绘制圆形
wx.canvas.currentContext.beginPath();
wx.canvas.currentContext.arc(circleOffsetX + centerX, circleOffsetY + centerY, radius, 0, Math.PI * 2);
wx.canvas.currentContext.fill();

// 恢复原状态
wx.canvas.currentContext.restore();

记得替换`...`处的实际值，并根据需求调整旋转角度。