uniapp canvas 获取缩放比并缩放

要获取当前 canvas 的缩放比，可以使用 `wx.getSystemInfo` 获取屏幕宽度和 canvas 宽度，然后用屏幕宽度除以 canvas 宽度即可得到缩放比。具体代码如下：

// 获取系统信息
const sysInfo = wx.getSystemInfoSync();
// 获取屏幕宽度和 canvas 宽度
const screenWidth = sysInfo.screenWidth;
const canvasWidth = canvas.width;
// 计算缩放比
const scale = screenWidth / canvasWidth;
// 缩放 canvas
context.scale(scale, scale);

注意，如果想要保持 canvas 的宽高比不变，需要同时缩放横向和纵向。如果只缩放横向或纵向，会导致图片变形。

相关问题

uniapp canvas 手势缩放

在uniapp中使用canvas实现手势缩放可以通过以下步骤实现：

1. 在canvas的绘制方法中获取手势事件的信息，包括手势类型、起始点、移动距离等信息。

2. 在手势的处理方法中计算缩放比例，并根据缩放比例对canvas进行缩放。

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

<template>
  <canvas
    @touchstart="touchStart"
    @touchmove="touchMove"
    @touchend="touchEnd"
    style="width: 100%; height: 100%;"
  ></canvas>
</template>

<script>
export default {
  methods: {
    touchStart(event) {
      if (event.touches.length === 2) {
        // 计算两个手指之间的距离
        this.distance = Math.sqrt(
          (event.touches[0].clientX - event.touches[1].clientX) ** 2 +
            (event.touches[0].clientY - event.touches[1].clientY) ** 2
        );
      }
    },

    touchMove(event) {
      if (event.touches.length === 2) {
        // 计算当前两个手指之间的距离
        const currentDistance = Math.sqrt(
          (event.touches[0].clientX - event.touches[1].clientX) ** 2 +
            (event.touches[0].clientY - event.touches[1].clientY) ** 2
        );
        // 计算缩放比例
        const scale = currentDistance / this.distance;
        // 更新缩放比例
        this.scale *= scale;
        // 更新起始点
        this.startX = (this.startX + event.touches[0].clientX) / 2;
        this.startY = (this.startY + event.touches[0].clientY) / 2;
        // 重新绘制canvas
        this.draw();
      }
    },

    touchEnd() {
      // 清空手势信息
      this.distance = 0;
    },

    draw() {
      // 获取canvas对象
      const ctx = uni.createCanvasContext("myCanvas", this);
      // 缩放canvas
      ctx.scale(this.scale, this.scale);
      // 绘制图形
      ctx.fillRect(this.startX, this.startY, 100, 100);
      // 显示canvas
      ctx.draw();
    },
  },

  data() {
    return {
      startX: 0, // 起始点的x坐标
      startY: 0, // 起始点的y坐标
      scale: 1, // 缩放比例
      distance: 0, // 两个手指之间的距离
    };
  },

  mounted() {
    // 绘制canvas
    this.draw();
  },
};
</script>

在上面的示例代码中，我们使用了uniapp提供的canvas API，通过scale方法实现缩放。在touchMove方法中，根据当前两个手指之间的距离计算缩放比例，并更新缩放比例和起始点的坐标。最后，在draw方法中调用scale方法对canvas进行缩放，然后绘制图形并显示canvas。

uniapp canvas 缩放实现

在uniapp中，可以通过使用canvas的scale方法来实现缩放效果。以下是一个简单的示例代码：

<template>
  <canvas id="myCanvas" style="width: 300px; height: 300px;"></canvas>
</template>

<script>
export default {
  mounted() {
    const ctx = uni.createCanvasContext('myCanvas', this);

    // 绘制一个圆形
    ctx.beginPath();
    ctx.arc(150, 150, 100, 0, Math.PI * 2, false);
    ctx.fillStyle = '#f00';
    ctx.fill();
    ctx.closePath();

    // 缩放画布
    ctx.scale(0.5, 0.5);

    // 再次绘制圆形，此时圆形大小会缩小一半
    ctx.beginPath();
    ctx.arc(150, 150, 100, 0, Math.PI * 2, false);
    ctx.fillStyle = '#00f';
    ctx.fill();
    ctx.closePath();

    ctx.draw();
  }
}
</script>

在上述示例中，我们首先在canvas上绘制了一个圆形，然后通过调用ctx.scale方法将画布缩小为原来的一半，再次绘制圆形，此时圆形大小会缩小一半。最后我们调用ctx.draw方法将画布渲染到页面上。

需要注意的是，缩放操作会影响到画布上所有之后绘制的图形，所以如果需要在不同的缩放比例下绘制不同的图形，需要在每次绘制完成后恢复画布的缩放比例。可以使用ctx.save和ctx.restore方法来保存和恢复画布状态。