js canvas库

// 使用 js canvas 库绘制一个简单的图形

// 引入必要的库（假设使用的是原生的 HTML5 Canvas API）
// 如果使用第三方库如 Fabric.js 或 Paper.js，需要引入相应的库文件

// 获取 canvas 元素和其上下文
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 设置 canvas 的宽度和高度
canvas.width = 400;
canvas.height = 400;

// 绘制一个矩形
ctx.fillStyle = 'blue'; // 设置填充颜色为蓝色
ctx.fillRect(50, 50, 200, 100); // 绘制一个矩形 (x, y, width, height)

// 绘制一个圆形
ctx.beginPath(); // 开始绘制路径
ctx.arc(300, 150, 50, 0, Math.PI * 2); // 绘制一个圆 (x, y, radius, startAngle, endAngle)
ctx.fillStyle = 'red'; // 设置填充颜色为红色
ctx.fill(); // 填充路径
ctx.closePath(); // 关闭路径

// 绘制一条线
ctx.beginPath();
ctx.moveTo(50, 300); // 移动到起点 (x, y)
ctx.lineTo(350, 300); // 绘制到终点 (x, y)
ctx.strokeStyle = 'green'; // 设置线条颜色为绿色
ctx.lineWidth = 5; // 设置线条宽度
ctx.stroke(); // 绘制线条

// 解释说明：
// 1. 通过 `getContext('2d')` 获取 2D 绘图上下文。
// 2. 使用 `fillRect` 方法绘制矩形，并设置其位置、大小和颜色。
// 3. 使用 `arc` 方法绘制圆形，并设置其位置、半径和角度范围。
// 4. 使用 `moveTo` 和 `lineTo` 方法绘制线条，并设置线条的颜色和宽度。