如何放大缩小 canvas?

4 min read

要放大或缩小一个Canvas，可以通过调整其CSS width和height属性来实现。以下是一种方法：

  1. 获取你想要操作的Canvas元素的引用。例如，你可以使用如下方式获取一个id为myCanvas的元素引用：
const canvas = document.getElementById('myCanvas');
  1. 创建一个变量来存储你希望的缩放比例，例如：
const scale = 2; // 2表示放大两倍，0.5表示缩小一半
  1. 计算新的宽度和高度，即原始宽度和高度乘以缩放比例：
const newWidth = canvas.width * scale;
const newHeight = canvas.height * scale;
  1. 设置Canvas的CSS宽度和高度为新的宽度和高度：
canvas.style.width = `${newWidth}px`;
canvas.style.height = `${newHeight}px`;

完成上述步骤后，Canvas元素将以新的尺寸显示，并且内容也将相应地放大或缩小。