JavaScript Canvas 缩放：以元素中心点为基准

您可以使用以下代码将画布以当前元素的中心点缩放：

// 获取当前元素
var element = document.getElementById('myElement');

// 获取元素的位置和尺寸
var boundingRect = element.getBoundingClientRect();
var centerX = boundingRect.left + boundingRect.width / 2;
var centerY = boundingRect.top + boundingRect.height / 2;

// 缩放画布
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.translate(centerX, centerY); // 将原点移动到元素中心点
context.scale(2, 2); // 缩放画布
context.translate(-centerX, -centerY); // 将原点移回到左上角

在此示例中，我们使用 getBoundingClientRect() 方法获取元素的位置和尺寸，并计算出中心点的坐标。然后，我们使用 translate() 方法将画布的原点移动到中心点，使用 scale() 方法缩放画布，最后使用 translate() 方法将原点移回到左上角。