uniapp canvas旋转90度

要将canvas旋转90度，可以使用canvas的`rotate()`方法。该方法会将canvas沿着原点顺时针旋转指定的弧度。

以下是一个示例代码：

<template>
  <canvas id="myCanvas" style="width: 100%; height: 100%;"></canvas>
</template>

<script>
export default {
  mounted() {
    const canvas = uni.createCanvasContext('myCanvas', this)
    canvas.rotate(Math.PI / 2) // 将canvas顺时针旋转90度
    canvas.setFillStyle('#f00')
    canvas.fillRect(10, 10, 50, 50) // 绘制一个矩形
    canvas.draw()
  }
}
</script>

在上述代码中，我们首先创建了一个canvas元素，并在mounted钩子函数中获取了该canvas的上下文对象。然后，我们使用`rotate()`方法将canvas旋转了90度，接着绘制了一个红色的矩形，并最终调用了`draw()`方法将绘制结果显示在canvas上。

相关问题

uniapp canvas 图片旋转

在uniapp中，可以通过canvas来实现图片旋转。具体实现方法是通过获取旋转的值，重新用canvas画图。需要在页面中加入canvas元素，并设置其高度和宽度，以便将上传的图片完整地画出来。同时，为了避免重复上传导致之前画的内容不会清空，可以使用v-if来清空。下面是一个自己封装的组件中的代码片段，可以供参考：

<template>
  <div class="canvas-wrap">
    <canvas ref="canvas" :width="canvasWidth" :height="canvasHeight"></canvas>
  </div>
</template>

<script>
export default {
  data() {
    return {
      canvasWidth: 0,
      canvasHeight: 0,
      img: null,
      rotate: 0
    };
  },
  mounted() {
    this.initCanvas();
  },
  methods: {
    initCanvas() {
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext('2d');
      const img = new Image();
      img.src = 'your-image-url';
      img.onload = () => {
        this.canvasWidth = img.width;
        this.canvasHeight = img.height;
        ctx.drawImage(img, 0, 0, img.width, img.height);
        this.rotateImage(ctx, img, this.rotate);
      };
    },
    rotateImage(ctx, img, degree) {
      const radian = degree * Math.PI / 180;
      const canvas = this.$refs.canvas;
      const newWidth = Math.abs(img.width * Math.cos(radian)) + Math.abs(img.height * Math.sin(radian));
      const newHeight = Math.abs(img.width * Math.sin(radian)) + Math.abs(img.height * Math.cos(radian));
      canvas.width = newWidth;
      canvas.height = newHeight;
      ctx.translate(newWidth / 2, newHeight / 2);
      ctx.rotate(radian);
      ctx.drawImage(img, -img.width / 2, -img.height / 2, img.width, img.height);
    }
  }
};
</script>

<style>
.canvas-wrap {
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}
</style>

uniapp项目canvas绘制文字支持缩放旋转拖拽

在uniApp项目中，利用HTML5的Canvas API可以实现文字的绘制、缩放、旋转以及拖拽功能。以下是简单步骤：

1. **文字绘制**：你可以通过`ctx.fillText()`或`ctx.strokeText()`方法在Canvas上绘制文本，传递文本内容和坐标信息。

2. **缩放**：使用`ctx.scale()`方法改变绘图上下文的比例因子，可以调整文字大小。例如，`ctx.scale(scaleX, scaleY)`会同时缩放x轴和y轴。

3. **旋转**：`ctx.rotate(angle)`允许你绕原点旋转，angle是以弧度表示的角度。先设置旋转中心，再绘制文字，如`ctx.translate(centerX, centerY); ctx.rotate(angle); ctx.fillText(text, centerX, centerY); ctx.restore();`

4. **拖拽**：为了实现文字拖拽，你需要监听用户的触摸事件（如touchstart, touchmove, touchend），并在移动过程中更新文字的位置。首先获取初始位置，然后计算每次移动的距离并更新canvas坐标。

onTouchMove(e) {
    let currentX = e.touches[0].clientX;
    let currentY = e.touches[0].clientY;
    let newX = currentX - startX; // startX记录初始触摸位置
    let newY = currentY - startY;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.save();
    ctx.translate(newX, newY);
    ctx.fillText(text, 0, 0); // 文字的新位置
    ctx.restore();
}