使用JS画图之点、线、面

本文介绍如何使用JavaScript（以下简称JS）来画图，并详细讲解绘制点、线、面的完整攻略。

准备工作

在开始绘图之前，我们需要准备以下文件：

HTML文件：用于展示画布
CSS文件：用于美化画布
JS文件：用于绘制图形

首先，在HTML文件中创建一个画布元素：

<canvas id="myCanvas"></canvas>

然后，在CSS文件中设置画布的样式：

#myCanvas {
  border: 1px solid #ddd;
}

现在，我们可以开始绘制图形了。

绘制点

在JS文件中，我们需要获取画布元素和画布的上下文（context），并设置要绘制的点的颜色和半径：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.strokeStyle = "red";
var radius = 5;

接下来，我们可以开始绘制点了，只需调用ctx.beginPath()方法，再使用ctx.arc()方法绘制圆形：

ctx.beginPath();
ctx.arc(x, y, radius, 0, 2 * Math.PI);
ctx.fill();

其中，x和y是点的坐标。

下面是一个绘制随机点的示例：

var numPoints = 10;
for (var i = 0; i < numPoints; i++) {
  var x = Math.random() * canvas.width;
  var y = Math.random() * canvas.height;
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, 2 * Math.PI);
  ctx.fill();
}

绘制线

在JS文件中，设置线条的颜色、粗细和样式：

ctx.strokeStyle = "blue";
ctx.lineWidth = 2;
ctx.lineCap = "round";

然后，我们可以开始绘制线了，只需调用ctx.beginPath()方法，再使用ctx.moveTo()和ctx.lineTo()方法连接点：

ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();

其中，x1、y1和x2、y2分别为线的起点和终点的坐标。

下面是一个绘制随机线的示例：

var numLines = 5;
for (var i = 0; i < numLines; i++) {
  var x1 = Math.random() * canvas.width;
  var y1 = Math.random() * canvas.height;
  var x2 = Math.random() * canvas.width;
  var y2 = Math.random() * canvas.height;
  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.stroke();
}

绘制面

在JS文件中，设置面的填充色和边框色：

ctx.fillStyle = "yellow";
ctx.strokeStyle = "green";

然后，我们可以开始绘制面了，只需调用ctx.beginPath()方法，再使用ctx.moveTo()和ctx.lineTo()方法连接点，并使用ctx.fill()和ctx.stroke()方法填充和描边：

ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.lineTo(x3, y3);
ctx.closePath();
ctx.fill();
ctx.stroke();

其中，x1、y1、x2、y2、x3、y3分别为面的三个顶点的坐标。

下面是一个绘制随机面的示例：

var numFaces = 3;
for (var i = 0; i < numFaces; i++) {
  var x1 = Math.random() * canvas.width;
  var y1 = Math.random() * canvas.height;
  var x2 = Math.random() * canvas.width;
  var y2 = Math.random() * canvas.height;
  var x3 = Math.random() * canvas.width;
  var y3 = Math.random() * canvas.height;
  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.lineTo(x3, y3);
  ctx.closePath();
  ctx.fill();
  ctx.stroke();
}