canvas 画一个长方形

好的，以下是使用 HTML5 的 canvas 元素画一个长方形的代码：

<canvas id="myCanvas" width="200" height="100"></canvas>

<script>
  const canvas = document.getElementById("myCanvas");
  const ctx = canvas.getContext("2d");
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(0, 0, 200, 100);
</script>

这段代码会在页面上创建一个宽为 200 像素，高为 100 像素的 canvas 元素，并在其中画一个红色的长方形。`ctx.fillRect(x, y, width, height)` 方法用于绘制矩形，其中 `(x, y)` 是矩形左上角的坐标，`width` 和 `height` 分别是矩形的宽度和高度。

相关问题

假设 你是一个前端程序员，现在在canvas上一个已知XY坐标和方向th的点，你需要绘制一个长方形方块，长方形的朝向和点的th方向一致

首先，我们可以利用canvas提供的方法，来绘制一个长方形。

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

<script>
  const canvas = document.getElementById("myCanvas");
  const ctx = canvas.getContext("2d");

  // 绘制长方形
  function drawRect(x, y, w, h) {
    ctx.beginPath();
    ctx.rect(x, y, w, h);
    ctx.closePath();
    ctx.stroke();
  }

  // 已知点的坐标和方向，绘制朝向相同的长方形
  function drawRectWithDirection(x, y, th, w, h) {
    ctx.translate(x, y);
    ctx.rotate(th);
    drawRect(-w / 2, -h / 2, w, h);
    ctx.rotate(-th);
    ctx.translate(-x, -y);
  }

  // 画布大小
  canvas.width = 400;
  canvas.height = 400;

  // 测试
  drawRectWithDirection(200, 200, Math.PI / 4, 100, 50);
</script>

上述代码中，`drawRect`函数用于绘制一个长方形，接收四个参数，分别为长方形左上角的x、y坐标，以及长和宽。我们使用`rect`方法来绘制长方形，然后使用`stroke`方法来描边。

接着，我们定义了`drawRectWithDirection`函数，该函数接收五个参数，分别为长方形中心点的x、y坐标，以及方向th、长和宽。该函数利用`translate`方法将画布坐标系移动到长方形中心点，然后利用`rotate`方法旋转画布坐标系，使其朝向th方向。最后调用`drawRect`函数绘制长方形，并再次利用`rotate`方法和`translate`方法将画布坐标系恢复到原来位置。

最后，我们在测试代码中调用`drawRectWithDirection`函数，传入长方形中心点坐标、方向、长和宽，来绘制一个朝向相同的长方形。

假设你是一个JS的前端程序员，现在在canvas上一个已知XY坐标和方向th的点，你需要绘制一个长方形方块，长方形的长宽分别为20和10，，长方形的方向与点的th方向一致，你能求出这个长方形的四个点，然后给出一个函数输入点的信息然后绘制出来吗

可以的，以下是实现该功能的代码：

// 输入参数：ctx-画布上下文，x-点的x坐标，y-点的y坐标，th-方向（弧度制）
function drawRect(ctx, x, y, th) {
  // 长方形长宽
  var w = 20;
  var h = 10;
  
  // 计算长方形四个点的坐标
  var x1 = x + w / 2 * Math.cos(th) - h / 2 * Math.sin(th);
  var y1 = y + w / 2 * Math.sin(th) + h / 2 * Math.cos(th);
  var x2 = x - w / 2 * Math.cos(th) - h / 2 * Math.sin(th);
  var y2 = y - w / 2 * Math.sin(th) + h / 2 * Math.cos(th);
  var x3 = x - w / 2 * Math.cos(th) + h / 2 * Math.sin(th);
  var y3 = y - w / 2 * Math.sin(th) - h / 2 * Math.cos(th);
  var x4 = x + w / 2 * Math.cos(th) + h / 2 * Math.sin(th);
  var y4 = y + w / 2 * Math.sin(th) - h / 2 * Math.cos(th);
  
  // 绘制长方形
  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.lineTo(x3, y3);
  ctx.lineTo(x4, y4);
  ctx.closePath();
  ctx.stroke();
}

上述代码中，我们先计算出长方形四个点的坐标，然后使用 `beginPath()` 方法开始路径绘制，依次连接四个点，最后使用 `stroke()` 方法绘制路径。