js canvas

// HTML部分
<canvas id="myCanvas" width="500" height="500"></canvas>

// JavaScript部分
<script>
  // 获取 canvas 元素
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');

  // 绘制一个简单的矩形
  ctx.fillStyle = 'green'; // 设置填充颜色为绿色
  ctx.fillRect(50, 50, 150, 100); // 在 (50, 50) 位置绘制一个宽 150px，高 100px 的矩形

  // 绘制一个圆形
  ctx.beginPath(); // 开始一条路径
  ctx.arc(250, 250, 50, 0, Math.PI * 2); // 在 (250, 250) 位置绘制一个半径为 50 的圆
  ctx.fillStyle = 'blue'; // 设置填充颜色为蓝色
  ctx.fill(); // 填充路径
  ctx.closePath(); // 关闭路径

  // 绘制一些文本
  ctx.font = '30px Arial'; // 设置字体大小和类型
  ctx.fillStyle = 'red'; // 设置文本颜色为红色
  ctx.fillText('Hello Canvas!', 50, 450); // 在 (50, 450) 位置绘制文本
</script>

解释说明：

1. HTML部分：创建了一个 <canvas> 元素，并设置了宽度和高度。
2. JavaScript部分：
   • 使用 getContext('2d') 获取 2D 绘图上下文。
   • 使用 fillRect() 方法绘制一个矩形，并设置了其位置、宽度、高度和颜色。
   • 使用 arc() 方法绘制一个圆形，并设置了其位置、半径和角度范围（完整圆形），然后用 fill() 方法填充它。
   • 使用 fillText() 方法在指定位置绘制一段文本，并设置了字体和颜色。

希望这个示例能帮助你理解如何使用 JavaScript 和 Canvas 进行绘图。