1. 准备工作
在进行圆的移动前，我们需要准备好几何画板，并且需要定义好画板中圆心的坐标和半径大小。
1.1 创建画布
创建一个画布的代码如下所示：
其中，标签定义了输出图形的大小，
注意：为了方便后面的操作，建议将画板的大小和圆心坐标和半径保存在变量中。
let canvas = document.querySelector('svg');
let centerX = 250;
let centerY = 250;
let radius = 50;
1.2 设置圆的样式
我们可以通过CSS样式来设置圆的样式，如颜色，边框，填充等。
circle {
fill: red;
stroke: black;
stroke-width: 2px;
}
2. 计算圆的坐标
如果要让圆移动，首先需要计算出圆心的新坐标。
2.1 计算圆心的新坐标
假设我们要让圆向右移动100px，我们需要将圆心的横坐标加上100。
centerX = centerX + 100;
注意：这里的加号代表数学中的加法，不是字符串的拼接。
同理，如果要让圆向左移动50px，我们需要将圆心的横坐标减去50。
centerX = centerX - 50;
2.2 计算圆的新位置
计算出圆的新坐标后，我们就可以根据圆心坐标和半径的大小计算出圆的新位置了。
circle.setAttribute('cx', centerX);
circle.setAttribute('cy', centerY);
注意：setAttribute()方法用于改变元素的属性，在这里我们使用它来改变圆的cx和cy属性。
3. 圆的移动动画
通过上面的步骤我们已经可以让圆移动了，但这种方式是瞬间完成的，如果想让它具有动画效果，我们可以使用CSS3中的transition属性或JavaScript中的setInterval函数。
3.1 CSS3动画
使用transition属性可以让圆具有平滑的过渡效果。
circle {
transition: all 1s ease;
}
注意：transition属性需要与其它CSS属性配合使用才能产生过渡效果。
3.2 JavaScript动画
通过使用setInterval函数，我们可以让圆在一段时间内逐渐移动到新位置。
function moveCircle() {
let interval = setInterval(function() {
centerX = centerX + 1;
circle.setAttribute('cx', centerX);
if (centerX >= 350) {
clearInterval(interval);
}
}, 10);
}
注意：这里的setInterval函数每隔10毫秒就会执行一次回调函数，直到圆的横坐标大于等于350时才会停止。
4. 总结
本文介绍了如何在几何画板中让一个圆移动，需要通过计算圆心的新坐标和重新设置圆的坐标和样式来实现移动。此外，还介绍了如何通过CSS3动画和JavaScript动画来给圆添加动态效果。
通过本文的学习，读者可以初步掌握几何画板的基本操作和圆的移动技巧，为后续的绘图工作打下基础。
