js 将画布原点改到中间 00的位置里面的元素进行缩小放大的会移动右下角怎么子元素缩放一直在中间

可以通过以下步骤来实现子元素缩放一直在中间：

1. 将画布原点移动到中心点：可以通过设置画布的 translate 属性来实现，例如：ctx.translate(canvas.width / 2, canvas.height / 2)。

2. 缩放画布：可以使用 ctx.scale 方法来对画布进行缩放，例如：ctx.scale(scaleX, scaleY)，其中 scaleX 和 scaleY 分别表示横向和纵向的缩放比例，可以根据需要进行调整。

3. 绘制子元素：在缩放和平移画布后，绘制子元素时需要考虑到坐标系的变化，可以先将子元素的坐标转换为相对于画布中心点的坐标，然后再进行绘制。

4. 子元素缩放：如果要使子元素缩放时一直在中间，可以先计算出子元素的中心点坐标，然后将画布的原点移动到该点，再进行缩放，最后再将原点移回中心点。

以下是一个示例代码：

// 设置画布原点为中心点
ctx.translate(canvas.width / 2, canvas.height / 2);

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

// 绘制子元素
ctx.beginPath();
ctx.arc(x - canvas.width / 2, y - canvas.height / 2, radius, 0, 2 * Math.PI);
ctx.fillStyle = color;
ctx.fill();

// 计算子元素中心点坐标
var centerX = x - canvas.width / 2;
var centerY = y - canvas.height / 2;

// 移动画布原点到子元素中心点
ctx.translate(centerX, centerY);

// 缩放子元素
ctx.scale(scaleX, scaleY);

// 绘制子元素
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2 * Math.PI);
ctx.fillStyle = color;
ctx.fill();

// 将画布原点移回中心点
ctx.translate(-centerX, -centerY);
``