mul-agent-virtual-simulation-system/train-web/canvas.md

// 常用方法的使用

// getContext('2d')：获取 2D 绘图上下文。它返回一个用于在 Canvas 上进行绘图操作的上下文对象。
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// beginPath()：开始一个新的路径。它用于定义一个路径，路径可以包含直线、曲线、弧线等。
ctx.beginPath();
// closePath()：闭合路径。它将当前路径的起点和终点连接起来，形成一个闭合的图形。
ctx.closePath();
// lineTo(x, y)：添加一条直线到指定的坐标点。它用于在路径中添加一个直线段。
ctx.lineTo(100, 100);
// rect(x, y, width, height)：创建一个矩形路径。它用于在路径中添加一个矩形。
ctx.rect(50, 50, 100, 100);
// arc(x, y, radius, startAngle, endAngle, anticlockwise)：创建一段圆弧路径。它用于在路径中添加一个圆弧。
ctx.arc(100, 100, 50, 0, Math.PI \* 2, false);
// moveTo(x, y)：将路径的起点移动到指定的坐标点。它用于在路径中移动当前位置，而不绘制任何线条。
ctx.moveTo(50, 50);
// stroke()：绘制路径的边框。它用于根据路径的定义绘制出路径的边框。
ctx.stroke();