1. 坐标系
在几何画板上绘制图形需要了解坐标系，坐标系由水平轴和竖直轴组成，分别用x轴和y轴表示，二者相交于原点（0,0），如下图所示：
在坐标系中，每个点都可以由x和y轴上的数值确定其位置。比如，点A在坐标系中的位置为(2,3)，其中2为x轴上的值，3为y轴上的值。在几何画板上，我们可以通过给定x和y坐标来绘制点。
2. 绘制点
2.1 创建画板
要在几何画板上绘制图形，首先需要创建画板。可以使用HTML5中的标签创建画板，如下所示：
其中，id属性指定画板的id，width和height属性分别指定画板的宽度和高度。
2.2 获取画笔
在创建画板后，需要获取画笔对象。可以使用JavaScript中的getContext()方法获取画笔，如下所示：
var canvas=document.getElementById("myCanvas");var ctx=canvas.getContext("2d");
其中，getContext()方法的参数指定画笔类型，这里选择2d表示绘制2D图形。
2.3 绘制点
绘制点使用fillRect()方法，该方法可以根据给定的坐标绘制一个矩形，没有填充颜色则默认为黑色。对于绘制点来说，我们可以指定矩形的宽度和高度都为1，绘制一个像素大小的点。
下面的代码演示了如何在坐标(100,100)处绘制一个红色的点：
ctx.fillStyle="#FF0000"; //红色
ctx.fillRect(100,100,1,1); //在(100,100)处绘制一个像素大小的点
3. 绘制形状
除了绘制点之外，我们还可以在几何画板上绘制其他形状，包括直线、折线、矩形、圆形等。下面将分别介绍这些形状的绘制方法。
3.1 直线
绘制直线使用moveTo()方法和lineTo()方法，其中moveTo()方法用于将画笔移动到指定的坐标位置，lineTo()方法用于绘制一条从当前位置到指定位置的线段。
//从坐标(0,0)绘制一条从左上角到右下角的直线
ctx.moveTo(0,0);
ctx.lineTo(500,500);
ctx.stroke();
3.2 折线
绘制折线需要依次连接多个点，可以使用moveTo()方法和lineTo()方法配合使用实现。下面的代码演示了如何依次绘制从左上角到右下角的折线：
ctx.moveTo(0,0);
ctx.lineTo(100,100);
ctx.lineTo(200,50);
ctx.lineTo(300,150);
ctx.lineTo(400,100);
ctx.lineTo(500,500);
ctx.stroke();
3.3 矩形
绘制矩形使用rect()方法，该方法接受四个参数，分别表示矩形的左上角点的x、y坐标和矩形的宽度、高度。绘制矩形时可以填充颜色或者只绘制边框。
下面的代码演示了如何在坐标为(100,100)的位置绘制一个宽度为100，高度为50的矩形，并填充为蓝色：
ctx.fillStyle="#0000FF"; //蓝色
ctx.fillRect(100,100,100,50); //填充矩形
3.4 圆形
绘制圆形使用arc()方法，该方法接受五个参数，分别是圆心的x、y坐标、圆的半径、起始角度和终止角度（以弧度为单位）。绘制圆形时同样可以填充颜色或只绘制边框。
下面的代码演示了如何在坐标为(250,250)的位置绘制一个半径为50的圆形，并填充为黄色：
ctx.fillStyle="#FFFF00"; //黄色
ctx.beginPath();
ctx.arc(250,250,50,0,2*Math.PI); //绘制圆形
ctx.fill();
4. 总结
本文主要介绍了如何在几何画板上绘制图形，包括绘制点、直线、折线、矩形和圆形等。在绘制图形时，需要了解坐标系，确定每个点的位置。在掌握绘制各种形状的技巧后，我们可以将其组合使用，绘制出更加复杂的图形。
尤其需要注意的是，在绘制之前需要获取画笔对象，这是进行绘图的前置步骤。另外，在绘制图形之前还可以设置画笔的样式，比如线条的宽度和颜色，填充颜色等等。
